/***********Kingdom Weather************/
.weather-kingdom-container {
  font-size: 13px;
  line-height: 26px;
}
.wk-title {
  font-family: "Droid Arabic Kufi", "Droid Sans Arabic", arial;
  color: #3871b9;
  font-size: 15px;
  font-weight: bold;
}
.wk-date {
  color: #888;
}
.wk-desc {
  color: #666;
  text-align: justify;
}
.wk-buttons {
  margin-top: 10px;
  color: #888;
}
.wk-social {
  display: inline-block;
  height: 20px;
  vertical-align: middle;
}
.wk-more-link {
  float: left;
  font-size: 12px;
  padding: 0 10px;
  color: #FFF !important;
  background: #3871b9;
  line-height: 20px;
}
.wk-more-link:hover {
  background: #ef7c00;
}
/***********City Weather************/
.main-weather-city {
  float: right;
  width: 100%;
  margin-bottom: 10px;
}
.weather-city-title {
  float: right;
}
.weather-city-ul {
  padding: 0;
  margin: 0;
  display: inline-block;
  float: right;
  margin-right: 5px;
}
.weather-city-ul li {
  display: inline-block;
}
.weather-city-ul li {
  display: inline-block;
}
.weather-city-ul a {
  color: #242424;
  border-right: 1px solid #242424;
  padding: 0 8px 0 6px;
  display: inline-block;
  line-height: 10px;
}
.weather-city-ul a:hover {
  color: #ef7c00;
}
.weather-city-ul li {
  float: right;
}
.weather-city-ul li.active {
  background: #c09f61;
  position: relative;
}
.weather-city-ul li.active:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(192, 159, 97, 0);
  border-top-color: #c09f61;
  border-width: 6px;
  margin-left: -6px;
  display: none;
}
.weather-city-ul li.active a {
  color: #FFF !important;
  border-right: 0;
}
.weather-city-ul li.active + li a {
  border-right: 0;
}
.weather-city-ul li:first-child a {
  border-right: 0;
}
.weather-other-city {
  float: left;
  background: #c09f61;
  padding: 0 10px;
  color: #FFF !important;
  margin-top: 3px;
}
.weather-other-city:hover {
  background: #ef7c00;
  color: #FFF;
}
.bit-main-weather-details .day-night-details {
  border-bottom: 1px dotted #666666;
  padding-bottom: 15px;
  padding-top: 15px;
  float: right;
  width: 100%;
}
.bit-day-weather,
.bit-night-weather {
  font-size: 16px;
}
.bit-day-weather .title_status,
.bit-night-weather .title_status {
  display: inline-block;
}
.bit-day-weather .status,
.bit-night-weather .status {
  display: block;
}
.bit-day-weather .degree,
.bit-night-weather .degree {
  font-size: 40px;
  font-weight: bold;
  position: relative;
  margin: 0 10px;
  line-height: 60px;
}
.bit-day-weather .degree:after,
.bit-night-weather .degree:after {
  content: "°";
  display: block;
  position: absolute;
  right: -7px;
  top: 3px;
  font-size: 20px;
  font-weight: normal;
}
.bit-day-weather .wi,
.bit-night-weather .wi {
  font-size: 50px;
  color: #242424;
}
.bit-day-weather {
  color: #6aa6cd;
  margin-left: 3%;
  width: 47%;
}
.bit-night-weather {
  color: #b5c241;
  border-right: 1px dotted #666666;
  padding-right: 3% !important;
}
.weather-current-container {
  border-bottom: 1px dotted #666;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.weather-current-container .weather-current-header {
  /**/
  font-size: 16px;
  color: #a3b031;
}
.weather-current-container .weather-current-header .time {
  /**/
  color: #ef7c00;
}
.weather-current-container .weather-current-main {
  font-size: 16px;
  text-align: center;
  width: 33%;
  display: inline-block;
  vertical-align: top;
}
.weather-current-container .weather-current-main .status {
  display: block;
  color: #666;
  font-size: 13px;
  padding-top: 0;
}
.weather-current-container .weather-current-main .degree {
  font-size: 40px;
  font-weight: bold;
  position: relative;
  line-height: 60px;
  color: #5498c7;
  display: inline-block;
}
.weather-current-container .weather-current-main .degree:after {
  content: "°";
  display: block;
  position: absolute;
  right: -7px;
  top: -10px;
  font-size: 20px;
  font-weight: normal;
}
.weather-current-container .weather-current-main .wi {
  display: inline-block;
  font-size: 50px;
  color: #242424;
  margin-right: 10px;
  margin-top: 10px;
}
.weather-current-container .weather-other-details {
  font-family: "Droid Arabic Kufi", "Droid Sans Arabic", arial;
  font-size: 12px;
  font-weight: bold;
  width: 66%;
  display: inline-block;
  vertical-align: top;
}
.weather-current-container .weather-other-details ul {
  padding: 0;
  margin: 0;
  display: block;
  line-height: 22px;
}
.weather-current-container .weather-other-details ul li {
  display: inline-block;
}
.weather-current-container .weather-other-details ul li {
  display: inline-block;
}
.weather-current-container .weather-other-details ul .wind {
  background-image: url('../images-ar/weather-data-wind.png');
}
.weather-current-container .weather-other-details ul .dew {
  background-image: url('../images-ar/weather-data-dew.png');
}
.weather-current-container .weather-other-details ul .humidity {
  background-image: url('../images-ar/weather-data-humidity.png');
  border-left: 1px solid #bbbbbb;
  width: 56%;
}
.weather-current-container .weather-other-details ul .visibility {
  background-image: url('../images-ar/weather-data-visibility.png');
  border-left: 1px solid #bbbbbb;
  margin-right: 1px;
  width: 56%;
}
.weather-current-container .weather-other-details ul .pressure {
  background-image: url('../images-ar/weather-data-pressure.png');
}
.weather-current-container .weather-other-details ul li {
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 26px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.weather-current-container .weather-other-details ul li .title {
  color: #888;
}
.weather-current-container .weather-other-details ul li .value {
  color: #666;
}
.weather-forecast-container > div {
  border-left: 1px dotted #666;
  display: inline-block;
  margin-left: 8px;
  padding-left: 8px;
  vertical-align: middle;
  line-height: 20px;
}
.weather-forecast-container .wf-header {
  color: #a3b031;
  font-size: 14px;
  border-left: 0;
  padding-left: 0;
}
.weather-forecast-container .max-temp {
  color: #ef7c00;
  text-align: center;
}
.weather-forecast-container .max-temp .value {
  position: relative;
}
.weather-forecast-container .max-temp .value:after {
  content: "°";
  display: block;
  font-size: 12px;
  font-weight: normal;
  position: absolute;
  right: -6px;
  top: -1px;
}
.weather-forecast-container .min-temp {
  color: #5498c7;
  text-align: center;
}
.weather-forecast-container .min-temp .value {
  position: relative;
}
.weather-forecast-container .min-temp .value:after {
  content: "°";
  display: block;
  font-size: 12px;
  font-weight: normal;
  position: absolute;
  right: -6px;
  top: -1px;
}
.weather-forecast-container .humidity {
  color: #666;
  text-align: center;
}
.weather-forecast-container .title {
  /**/
}
.weather-forecast-container .value {
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
}
.weather-forecast-container .details {
  color: #666;
  display: inline-block;
  border-left: 0;
  padding-left: 0;
  margin-left: 0;
  width: 142px;
}
.weather-forecast-container .details .text {
  max-width: 60%;
  display: inline-block;
  vertical-align: middle;
}
.weather-forecast-container .details i {
  font-size: 26px;
  padding-top: 5px;
  vertical-align: middle;
  color: #333;
  margin-left: 8px;
}
.row-3d {
  width: 86px;
  height: 100px;
  margin: 0 12px 0 0;
  float: right;
  position: relative;
  cursor: pointer;
}
.row-3d:first-child {
  margin-right: 0;
}
.row-3d-in {
  width: 100%;
  height: 100px;
}
.row-3d-in .frontside,
.row-3d-in .backside {
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: #fff;
}
.not-ie .row-3d {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
}
.not-ie .row-3d-in {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-120px);
  -moz-transform: translateZ(-120px);
  -ms-transform: translateZ(-120px);
  -o-transform: translateZ(-120px);
  transform: translateZ(-120px);
  -webkit-transition: transform 350ms;
  -moz-transition: transform 350ms;
  -o-transition: transform 350ms;
  transition: transform 350ms;
}
.not-ie .row-3d-in:hover {
  -webkit-transform: rotateY(-90deg) translateZ(0px) translateY(0px) scale3d(0.94, 0.94, 0.94);
  -moz-transform: rotateY(-90deg) translateZ(0px) translateY(0px) scale3d(0.94, 0.94, 0.94);
  -ms-transform: rotateY(-90deg) translateZ(0px) translateY(0px) scale3d(0.94, 0.94, 0.94);
  -o-transform: rotateY(-90deg) translateZ(0px) translateY(0px) scale3d(0.94, 0.94, 0.94);
  transform: rotateY(-90deg) translateZ(0px) translateY(0px) scale3d(0.94, 0.94, 0.94);
}
.not-ie .row-3d-in .frontside,
.not-ie .row-3d-in .backside {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.not-ie .row-3d-in .frontside {
  -webkit-transform: translateZ(39px);
  -moz-transform: translateZ(39px);
  -ms-transform: translateZ(39px);
  -o-transform: translateZ(39px);
  transform: translateZ(39px);
}
.not-ie .row-3d-in .backside {
  -webkit-transform: rotateY(90deg) translateZ(42px);
  -moz-transform: rotateY(90deg) translateZ(42px);
  -ms-transform: rotateY(90deg) translateZ(42px);
  -o-transform: rotateY(90deg) translateZ(42px);
  transform: rotateY(90deg) translateZ(42px);
}
.ie {
  /*.row-3d {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -ms-perspective: 1000px;
        perspective: 1000px;
    }

    .row-3d-in {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
        position: relative;
    }

    .row-3d-in:hover {
    }*/
}
.ie .frontside {
  display: block;
}
.ie .backside {
  display: none;
}
.ie .row-3d-in:hover .frontside {
  display: none;
}
.ie .row-3d-in:hover .backside {
  display: block;
}
.nextdays {
  font-family: Tahoma;
  font-size: 12px;
  text-align: center;
  padding: 0;
  margin: 0;
  margin-top: 15px;
}
.nextdays li {
  display: inline-block;
}
.nextdays li {
  display: inline-block;
}
.nextdays .frontside {
  background: #efefef;
}
.nextdays .frontside .day {
  font-size: 12px;
}
.nextdays .frontside .degree {
  background: #ef7c00;
}
.nextdays .backside {
  background: #efefef;
}
.nextdays .backside .degree {
  background: #5498c7;
}
.nextdays .day {
  color: #ab8a47;
  margin-top: 6px;
  font-weight: bold;
  font-size: 11px;
}
.nextdays .wi {
  font-size: 30px;
  margin-top: 10px;
  font-weight: normal;
}
.nextdays .degree {
  bottom: 0;
  color: #ffffff;
  height: 26px;
  line-height: 22px;
  position: absolute;
  width: 100%;
}
.main-weather-map {
  position: relative;
  background: url('../images-ar/main-map.png') right top no-repeat;
  background-size: contain;
  max-width: 470px;
  width: 100%;
  margin: 0 auto;
}
.main-weather-map-scale {
  right: 0;
  position: absolute;
  top: 0;
  z-index: 105;
  display: none;
}
.main-weather-map-img {
  position: relative;
  z-index: 102;
  max-width: 100%;
}
.map-sa {
  right: 0;
  position: absolute;
  top: 0;
  z-index: 105;
  width: 470px;
}
.map-sa a {
  z-index: 105;
  position: absolute;
  height: 20px;
  width: 50px;
  text-align: center;
  color: #333;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  font-family: Tahoma;
  cursor: pointer;
  font-size: 11px;
}
.mw-city-details {
  width: 130px;
  /*height: 75px;*/
  text-align: center;
  color: #666666;
  font-family: "Droid Arabic Kufi", "Droid Sans Arabic", arial;
  font-weight: bold;
  background: #f3f3f3;
  line-height: 22px;
  position: absolute;
  top: 190px;
  right: 30px;
  border: 1px solid #bbb;
  padding: 10px 5px;
}
.mw-city-name {
  color: #4a8613;
}
.pin-container {
  width: 470px;
  z-index: 105;
  pointer-events: none;
  top: 0;
  position: absolute;
  right: 0;
}
.map-pin {
  position: absolute;
  z-index: 100;
}
.map-icons {
  right: 0;
  position: absolute;
  top: 0;
  z-index: 100;
  pointer-events: none;
  background-color: transparent;
}
.main-weather-map-icons {
  height: 100%;
  right: 0;
  position: absolute;
  top: 0;
  /*width: 100%;*/
  z-index: 103;
  pointer-events: none;
  width: 470px;
  /*#city-link-0 {
		right: 300px;
		top: 12px;
	}

	#city-link-1 {
		right: 340px;
		top: 32px;
	}

	#city-link-2 {
		right: 374px;
		top: 62px;
	}

	#city-link-3 {
		right: 264px;
		top: 50px;
	}

	#city-link-4 {
		right: 184px;
		top: 55px;
	}

	#city-link-5 {
		right: 245px;
		top: 102px;
	}

	#city-link-6 {
		right: 314px;
		top: 106px;
	}

	#city-link-7 {
		right: 368px;
		top: 125px;
	}

	#city-link-8 {
		right: 200px;
		top: 128px;
	}

	#city-link-9 {
		right: 305px;
		top: 153px;
	}

	#city-link-10 {
		right: 350px;
		top: 177px;
	}

	#city-link-11 {
		right: 256px;
		top: 190px;
	}

	#city-link-12 {
		right: 314px;
		top: 216px;
	}

	#city-link-13 {
		right: 248px;
		top: 227px;
	}

	#city-link-14 {
		right: 192px;
		top: 233px;
	}

	#city-link-15 {
		right: 304px;
		top: 256px;
	}*/
}
.main-weather-map-icons a {
  position: absolute;
  color: #846c37;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  pointer-events: auto;
  cursor: pointer;
}
/*.map-pin-0 {
	right: 310px;
	top: -1px;
}

.map-pin-1 {
	right: 314px;
	top: 19px;
}

.map-pin-2 {
	right: 366px;
	top: 43px;
}

.map-pin-3 {
	right: 273px;
	top: 37px;
}

.map-pin-4 {
	right: 168px;
	top: 39px;
}

.map-pin-5 {
	right: 254px;
	top: 74px;
}

.map-pin-6 {
	right: 335px;
	top: 90px;
}

.map-pin-7 {
	right: 356px;
	top: 102px;
}

.map-pin-8 {
	right: 218px;
	top: 107px;
}

.map-pin-9 {
	right: 319px;
	top: 144px;
}

.map-pin-10 {
	right: 334px;
	top: 163px;
}

.map-pin-11 {
	right: 285px;
	top: 174px;
}

.map-pin-12 {
	right: 282px;
	top: 201px;
}

.map-pin-13 {
	right: 259px;
	top: 213px;
}

.map-pin-14 {
	right: 196px;
	top: 214px;
}

.map-pin-15 {
	right: 267px;
	top: 235px;
}*/
.weather-current-no-data {
  height: 96px;
  margin: 0 auto;
  vertical-align: middle;
  padding-top: 18px;
  display: table;
}
.weather-current-no-data div {
  display: table-row;
}
.weather-current-no-data div span {
  vertical-align: middle;
  color: #666;
  font-size: 20px;
  display: table-cell;
  line-height: 30px;
}
.weather-current-no-data div .wcd-icon {
  text-align: left;
  padding-left: 10px;
}
.weather-current-no-data div .wcd-icon img {
  vertical-align: middle;
  display: table-cell;
}
.weather-forecast-container-no-data {
  height: 40px;
  margin: 0 auto;
  vertical-align: middle;
  display: table;
}
.weather-forecast-container-no-data div {
  display: table-row;
}
.weather-forecast-container-no-data div span {
  vertical-align: middle;
  color: #666;
  font-size: 13px;
  display: table-cell;
}
.weather-forecast-container-no-data div .wcd-icon {
  text-align: left;
  padding-left: 10px;
}
.weather-forecast-container-no-data div .wcd-icon img {
  vertical-align: middle;
  display: table-cell;
  width: 24px;
}
/******************  Weather - Today ******/
.weather-today-container {
  margin-top: 10px;
}
.WeatherGrid .GridViewStyle {
  margin-top: 0;
}
.WeatherGrid .header-city {
  min-width: 100px;
}
.WeatherGrid .wi-refresh {
  font-size: 18px;
  text-align: center;
  vertical-align: sub;
  width: 16px;
}
.footable_expand_collapse {
  display: none;
}
.weather-degree-marquee {
  background: #f2f2f2;
  border: 1px solid #5498c7;
}
.wdm-title {
  background: #5498c7;
  color: #fff;
  float: right;
  padding: 5px 10px;
  height: 35px;
  line-height: 26px;
}
.wdm-marquee {
  overflow: hidden;
  direction: ltr;
  padding: 5px 10px;
  height: 35px;
  line-height: 26px;
}
.wdm-degree {
  color: #3b84b1;
  padding-left: 10px;
}
.js-marquee {
  direction: rtl;
}
.portsStatusLink {
  margin: 10px auto 0;
  width: 280px;
  display: block !important;
}
/******************  Weather - Home ******/
.weather-home-container {
  margin-top: 10px;
}
.page-banners {
  /*.page-banner-14 {
		background-image: url('../@{images}/wh-02.jpg');
		background-position: left center !important;
		background-size: auto !important;
	}*/
}
.page-banners:before,
.page-banners:after {
  clear: both;
  content: " ";
  display: table;
  height: 10px;
  width: 100%;
}
.page-banners a {
  position: relative;
  color: #FFF;
  height: 93px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  float: right;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
}
.page-banners a span {
  position: absolute;
  bottom: 8px;
  right: 0;
  width: 100%;
  line-height: 16px;
}
.page-banners a span.out {
  bottom: -100%;
}
.page-banners a:hover {
  color: #FFF;
}
.page-banners a:hover span {
  bottom: 120%;
}
.page-banners a:hover span.out {
  bottom: 8px;
}
.page-banners .page-banner-img {
  background-size: 100% auto;
}
.page-banners .page-banner-1 {
  background-image: url('../images-ar/wh-01.jpg');
  background-position: left center !important;
  background-color: #5498c7;
  background-size: auto !important;
}
.page-banners .page-banner-2 {
  background-image: url('../images-ar/wh-02-2.jpg');
  background-position: left center !important;
}
.page-banners .page-banner-3 {
  background-image: url('../images-ar/wh-03.jpg');
}
.page-banners .page-banner-4 {
  background-image: url('../images-ar/wh-04-2.jpg');
  background-color: #0294d9;
  background-size: auto !important;
}
.page-banners .page-banner-5 {
  background-image: url('../images-ar/wh-05.jpg');
  background-color: #83a74d;
  background-size: auto !important;
}
.page-banners .page-banner-6 {
  background-image: url('../images-ar/wh-06.jpg');
  background-color: #ef7c00;
  background-size: auto !important;
}
.page-banners .page-banner-7 {
  background-image: url('../images-ar/wh-07.jpg');
  background-color: #5498c7;
  background-size: auto !important;
}
.page-banners .page-banner-8 {
  background-image: url('../images-ar/wh-08.jpg');
}
.page-banners .page-banner-9 {
  background-image: url('../images-ar/wh-09-2.jpg');
}
.page-banners .page-banner-10 {
  background-image: url('../images-ar/wh-10.jpg');
}
.page-banners .page-banner-11 {
  background-image: url('../images-ar/wh-11.jpg');
  background-color: #ef3300;
  background-size: auto !important;
}
.page-banners .page-banner-12 {
  background-image: url('../images-ar/wh-12.jpg');
  background-color: #7faece;
  background-size: auto !important;
}
.page-banners .page-banner-13 {
  background-image: url('../images-ar/wh-13.jpg');
}
.page-banners .page-banner-14 {
  background-image: url('../images-ar/wh-14-2.jpg');
  /*background-color: #5b402a;
		background-size: auto !important;*/
}
.page-banners .page-banner-15 {
  background-image: url('../images-ar/wh-15.jpg');
}
.page-banners .page-banner-16 {
  background-image: url('../images-ar/wh-16.jpg');
}
.page-banners .page-banner-17 {
  background-image: url('../images-ar/wh-17.jpg');
  background-color: #5498c7;
  background-size: auto !important;
}
.page-banners .page-banner-18 {
  background-image: url('../images-ar/wh-19.jpg');
}
.page-banners .page-banner-19 {
  background-image: url('../images-ar/wh-18.jpg');
}
.page-banners .page-banners-group-1 .bit-2 {
  display: none;
}
.weather-city-selected {
  display: none;
}
.wrapper-dropdown-3 {
  height: 28px;
}
.wrapper-dropdown-3 .dropdown {
  height: 146px;
  overflow: auto;
  overflow: overlay;
  top: 115% !important;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
  border-radius: 0 !important;
}
#map_dd.wrapper-dropdown-3 {
  float: right;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
  width: 130px;
}
#map_dd.wrapper-dropdown-3 .weather-city-selected {
  display: inline;
}
.weather-city-ul.dropdown {
  height: 188px !important;
  z-index: 103;
}
.weather-city-ul.dropdown > li {
  width: 100%;
}
.weather-city-ul.dropdown > li a {
  border-right: 0 none;
  padding: 10px !important;
}
.weather-city-ul.dropdown > li a:hover {
  color: #242424;
}
.weather-city-ul.dropdown > li a.active {
  color: #FFF;
}
/******************  Media Query ******/
@media (max-width: 1100px) {
  .frame-main-weather > .bit-2 {
    width: 50%;
  }
  .page-banners .bit-2 {
    width: 50%;
  }
  .page-banners .bit-4 {
    width: 25%;
  }
}
@media (max-width: 992px) {
  .row-3d {
    margin: 0 10px 0 0;
  }
}
@media (max-width: 979px) and (min-width: 768px) {
  .bit-main-weather-details {
    width: 55% !important;
    position: relative;
    z-index: 1;
    padding-top: 0;
  }
  .weather-current-container {
    margin-bottom: 0;
    padding-bottom: 5px;
  }
  .weather-current-container .weather-current-main .wi {
    font-size: 45px;
    margin-right: 5px;
  }
  .weather-current-container .weather-other-details {
    width: 65%;
  }
  .weather-current-container .weather-other-details ul li {
    margin-bottom: 0;
    margin-top: 5px;
    border-bottom: 1px dotted #ccc;
    width: 48% !important;
  }
  .weather-current-container .weather-other-details ul li .title {
    font-size: 11px;
    line-height: 10px;
    display: block;
  }
  .weather-current-container .weather-other-details ul li .value {
    font-size: 11px;
  }
  .weather-current-container .weather-other-details ul .visibility {
    margin-right: 0;
  }
  .weather-current-container .weather-other-details ul .wind {
    border-bottom: 0;
    width: 100% !important;
  }
  .weather-forecast-container .todayTitle-container {
    display: none;
  }
  .weather-forecast-container > div {
    font-size: 11px;
  }
  .weather-forecast-container .details {
    width: 36%;
  }
  .nextdays {
    margin: 5px 0 0;
  }
  .nextdays .row-3d {
    width: 20%;
    margin: 0;
  }
  .nextdays .row-3d .row-3d-in {
    width: 100%;
  }
  .nextdays .row-3d .row-3d-in .frontside,
  .nextdays .row-3d .row-3d-in .backside {
    width: 100%;
  }
  .bit-main-weather-map {
    left: 0;
    position: absolute;
    width: 50%;
  }
}
@media (max-width: 800px) {
  .weather-city-ul {
    opacity: 0;
  }
  .page-banners [class*="bit-"] {
    padding: 5px;
  }
  .page-banners [class*="bit-"]:last-of-type {
    padding-left: 5px;
  }
  .page-banners .page-banner-1 {
    background-size: contain !important;
  }
  .page-banners .page-banners-group-1 .bit-3 {
    width: 33.33%;
  }
  .page-banners > .bit-2 {
    width: 50%;
  }
  .page-banners > .bit-2 .bit-2 a {
    width: 100%;
  }
}
@media (max-width: 800px) and (min-width: 768px) {
  .bit-main-weather-details {
    min-height: 300px;
  }
}
@media (max-width: 767px) {
  .frame-main-weather > .bit-2 {
    width: 100%;
  }
  .row-3d {
    width: 19%;
    margin: 0 1% 0 0;
  }
}
@media (max-width: 600px) {
  .wdm-title {
    width: 100%;
  }
  .wdm-marquee {
    width: 100%;
    margin-right: 0;
  }
  .page-banners > .bit-2 {
    width: 100%;
  }
  .page-banners a {
    width: 100%;
  }
  .page-banners .page-banner-img {
    background-size: 100% 100%;
  }
  .page-banners .page-banner-1 {
    background-position: center center !important;
  }
  .bit-4:nth-child(3) {
    clear: none !important;
    float: right !important;
  }
  .portsStatusLink {
    float: none;
    margin: 10px auto 0;
  }
}
@media (max-width: 480px) {
  .footable_expand_collapse {
    display: block;
  }
  .page-banners {
    padding: 0 10px;
  }
  .weather-current-container .weather-other-details ul li {
    font-size: 11px;
  }
  .weather-forecast-container > div {
    margin-left: 2px;
    padding-left: 6px;
  }
}
@media (max-width: 460px) {
  .bit-main-weather-details {
    padding-top: 0;
  }
  .weather-current-container .weather-current-header .time {
    display: block;
    line-height: 18px;
    margin-bottom: 8px;
  }
  .weather-current-container .weather-current-main {
    background: #efefef none repeat scroll 0 0;
    margin-bottom: 5px;
    min-height: 85px;
    padding-top: 10px;
    width: 100%;
  }
  .weather-current-container .weather-current-main > * {
    vertical-align: middle;
    margin-top: 0;
  }
  .weather-current-container .weather-current-main .status {
    display: inline-block;
  }
  .weather-current-container .weather-other-details {
    width: 100%;
  }
  .weather-current-container .weather-other-details ul li {
    width: 52% !important;
    margin: 2px 0 !important;
  }
  .weather-current-container .weather-other-details ul .dew,
  .weather-current-container .weather-other-details ul .pressure {
    width: 46% !important;
  }
  .weather-current-container .weather-other-details ul .wind {
    width: 99% !important;
  }
  .weather-forecast-container .wf-header {
    display: block;
    margin-bottom: 8px;
  }
  .weather-forecast-container .max-temp,
  .weather-forecast-container .min-temp,
  .weather-forecast-container .humidity {
    width: 15%;
  }
  .weather-forecast-container .details {
    width: 46%;
    text-align: center;
  }
  .nextdays {
    margin-top: 25px;
  }
  .nextdays .day {
    margin-top: -18px;
    margin-bottom: 6px;
  }
  .nextdays .backside .day {
    font-size: 11px;
  }
  .nextdays .row-3d {
    height: 88px;
  }
  .nextdays .row-3d .row-3d-in .frontside,
  .nextdays .row-3d .row-3d-in .backside {
    height: 88px;
  }
  .nextdays .degree {
    line-height: 14px;
    height: 32px;
  }
  .nextdays .degree .value {
    display: block;
  }
}
@media (max-width: 360px) {
  .weather-current-no-data {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .page-banners-group-2 .bit-4 {
    width: 33.33%;
  }
  .page-banners-group-2 .bit-2 {
    width: 33.33%;
  }
  .page-banners-group-2 .bit-2.lastItem {
    width: 100%;
  }
  .portsStatusLink {
    width: 100%;
  }
  .map-pin {
    margin-top: -4px;
    margin-right: -2px;
  }
}