@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;		
}

body {background-color: transparent}

@font-face {
    font-family:PFDinTextCondPro;
    src: url(../fonts/PFDinTextCondPro-Regular.ttf);
}

@font-face {
    font-family:PFDinTextCondProL;
    src: url(../fonts/PFDinTextCondPro-Light.ttf);
}

@font-face {
    font-family:PFDinTextCondProT;
    src: url(../fonts/PFDinTextCondPro-Thin.ttf);
}

body:after {
   content: url(../images/weather/arrow-compass.png) url(../images/weather/arrow-wind.png) url(../images/weather/bg.jpg) url(../images/weather/compss.png) url(../images/weather/logo.png) url(../images/weather/max-temp.png) url(../images/weather/min-temp.jpg) url(../images/weather/pin.png) url(../images/weather/sunrise.png) url(../images/weather/sunset.png); 
   display: none;
}

#wrapper {
	z-index:0;
	width:1280px;
	height:720px;
	position: relative;
	margin:0 auto;
	overflow:hidden;
}

/*====================SCENE 1 CSS=====================*/

#wrapper #background {
	z-index:0;
	/*display:none;*/
	width:1280px;
	height:720px;
	position:absolute;
	top:0;
	left:0;
	/*background: url(../images/weather/bg.jpg) no-repeat top left; */
}

#wrapper #background #weatherWrap {
	z-index:1;
	/*display:none;*/
	width:1240px;
	height:680px;
	position:relative;
	margin:20px;
}

#wrapper #background #weatherWrap .infoWrap {
	z-index:1;
	/*display:none;*/
	width:400px;
	height:465px;
	position:relative;
	float:left;
	margin:0 20px 20px 0;
}

#place, #currentTemp, #currentInfo {display:none}


/*====================placeWrap=====================*/

#wrapper #background #weatherWrap .infoWrap .placeWrap{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:84px;
	position:relative;
	float:left;
}

#wrapper #background #weatherWrap .infoWrap .placeWrap #pinIcon{
	z-index:1;
	/*display:none;*/
	width:37px;
	height:84px;
	margin:0 19px 0 6px;
	position:relative;
	float:left;
	background: url(../images/weather/pin.png) no-repeat top left;
}

#wrapper #background #weatherWrap .infoWrap .placeWrap .place{
	z-index:1;
	/*display:none;*/
	width:338px;
	height:100%;
	position:relative;
	float:left;
	font-family:PFDinTextCondPro, Arial, Helvetica, sans-serif;
	font-size:62px;
	line-height:84px;
	text-align:left;
	color:#fff;
}

#wrapper #background #weatherWrap .infoWrap .weatherIcon{
	z-index:1;
	/*display:none;*/
	width:305px;
	height:305px;
	position:relative;
	float:left;
	margin:0 48px 0 47px;
}

#wrapper #background #weatherWrap .infoWrap .widgetIcon{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:65px;
	position:relative;
	float:left;
	margin:14px auto 0 auto;
	background:url(../images/weather/logo.png) no-repeat top center;
}

/*====================tempratureWrap=====================*/

#wrapper #background #weatherWrap .infoWrap .date{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:54px;
	position:relative;
	float:left;
	font-family:PFDinTextCondProL, Arial, Helvetica, sans-serif;
	font-size:37px;
	color:#1d3145;
	background:#f3d833;
	display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

#wrapper #background #weatherWrap .infoWrap #tempWrap{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:411px;
	position:relative;
	float:left;
	background:#fff;
}

#wrapper #background #weatherWrap .infoWrap #tempWrap .currTemp{
	z-index: 1;
    /* display: none; */
    width: 100%;
    height: 213px;
    position: relative;
    float: left;
    font-family: PFDinTextCondProL, Arial, Helvetica, sans-serif;
    font-size: 239px;
	margin-top:20px;
	display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    color: #1d3145;
}

#wrapper #background #weatherWrap .infoWrap #tempWrap .line{
	z-index:1;
	/*display:none;*/
	width:372px;
	height:1px;
	position:relative;
	float:left;
	background:#1d3145;
	margin:0 14px;
}

#wrapper #background #weatherWrap .infoWrap #tempWrap .weatherDesc{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:81px;
	position:relative;
	float:left;
	font-family:PFDinTextCondProL, Arial, Helvetica, sans-serif;
	font-size:45px;
	line-height:81px;
	text-align:center;
	color:#1d3145;
}

#wrapper #background #weatherWrap .infoWrap #tempWrap .minMaxWrap{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:105px;
	position:relative;
	float:left;
}

#wrapper #background #weatherWrap .infoWrap #tempWrap .minMaxWrap{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:105px;
	position:relative;
	float:left;
}

#wrapper #background #weatherWrap .infoWrap #tempWrap .minMaxWrap #maxIcon{ 
	z-index:1;
	/*display:none;*/
	width:28px;
	height:59px;
	position:relative;
	float:left;
	margin:28px 10px 0 22px;
	background:url(../images/weather/max-temp.png) no-repeat center center;
}

#wrapper #background #weatherWrap .infoWrap #tempWrap .minMaxWrap .curTempSm{
	z-index:1;
	/*display:none;*/
	width:140px;
	height:85px;
	position:relative;
	float:left;
	font-family:PFDinTextCondProL, Arial, Helvetica, sans-serif;
	font-size:84px;
	text-align:left;
	color:#1d3145;
	margin:20px 11px 0 0;
	display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

#wrapper #background #weatherWrap .infoWrap #tempWrap .minMaxWrap #minIcon{ 
	z-index:1;
	/*display:none;*/
	width:28px;
	height:59px;
	position:relative;
	float:left;
	margin:28px 10px 0 0;
	background: url(../images/weather/min-temp.jpg) no-repeat center center;
}

sup {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
        font-size: 0.53em;
        vertical-align: super;
        line-height:0;	
		 -webkit-box-align: center;
		-webkit-align-items: center;
		-moz-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
    }



/*====================infoWrap=====================*/

#wrapper #background #weatherWrap .infoWrap #mainWrap{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:100%;
	position:relative;
	background:#f3d833;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap .infoTitle{
	z-index:1;
	/*display:none;*/
	width:202px;
	height:81px;
	position:relative;
	float:left;
	font-family:PFDinTextCondProT, Arial, Helvetica, sans-serif;
	font-size:51px;
	line-height:81px;
	text-align:left;
	color:#1d3145;
	margin:0 0 0 29px;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap .infoDegree{
	z-index:1;
	/*display:none;*/
	width:151px;
	height:81px;
	position:relative;
	float:left;
	font-family:PFDinTextCondProL, Arial, Helvetica, sans-serif;
	font-size:67px;
	line-height:81px;
	text-align:left;
	color:#1d3145;
	margin:0 18px 0 0;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap .line{
	z-index:1;
	/*display:none;*/
	width:361px;
	height:1px;
	position:relative;
	float:left;
	background:#1d3145;
	margin:0 18px;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap #windWrap{
	z-index:1;
	/*display:none;*/
	width:361px;
	height:199px;
	position:relative;
	float:left;
	margin:0 18px;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap #windWrap .windTitle{
	z-index:1;
	/*display:none;*/	
	position:absolute;
	width:165px;
	height:50px;
	top:49px;
	left:11px;
	font-family:PFDinTextCondProT, Arial, Helvetica, sans-serif;
	font-size:50px;
	line-height:50px;
	text-align:left;
	color:#1d3145;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap #windWrap .windDegree{
	z-index:1;
	/*display:none;*/	
	position:absolute;
	width:165px;
	height:51px;
	top:111px;
	left:11px;
	font-family:PFDinTextCondProL, Arial, Helvetica, sans-serif;
	font-size:51px;
	line-height:51px;
	text-align:left;
	color:#1d3145;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap #windWrap #compass{
	z-index:1;
	/*display:none;*/	
	position:absolute;
	width:161px;
	height:161px;
	top:20px;
	right:9px;
	background:url(../images/weather/compss.png) no-repeat top left;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap #windWrap .compassArrow{
	z-index:11;
	/*display:none;*/	
	position:relative;
	width:161px;
	height:161px;
	background: url(../images/weather/arrow-compass.png) no-repeat center center;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap .sunWrap{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:101px;
	position:relative;
	float:left;
}


#wrapper #background #weatherWrap .infoWrap #mainWrap .sunWrap #sunriseIcon{ 
	z-index:1;
	/*display:none;*/
	width:67px;
	height:70px;
	position:relative;
	float:left;
	margin:13px 11px 0 17px;
	background: url(../images/weather/sunrise.png) no-repeat center center;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap .sunWrap #sunsetIcon{ 
	z-index:1;
	/*display:none;*/
	width:68px;
	height:70px;
	position:relative;
	float:left;
	margin:13px 5px 0 0;
	background: url(../images/weather/sunset.png) no-repeat center center;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap .sunWrap .sunrise{
	z-index:1;
	/*display:none;*/
	width:103px;
	height:101px;
	position:relative;
	float:left;
	font-family:PFDinTextCondProT, Arial, Helvetica, sans-serif;
	font-size:64px;
	line-height:101px;
	text-align:left;
	color:#1d3145;
}

#wrapper #background #weatherWrap .infoWrap #mainWrap .sunWrap .sunset{
	z-index:1;
	/*display:none;*/
	width:112px;
	height:101px;
	position:relative;
	float:left;
	font-family:PFDinTextCondProT, Arial, Helvetica, sans-serif;
	font-size:64px;
	line-height:101px;
	text-align:left;
	color:#1d3145;
}

/*====================forecastWrap=====================*/
#wrapper #background #weatherWrap #forecastWrap {
	z-index:1;
	display:none;
	width:100%;
	height:195px;
	position:relative;
	float:left;
	background:#fff;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap{
	z-index:1;
	/*display:none;*/
	width:413px;
	height:100%;
	position:relative;
	float:left;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forDay{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:45px;
	position:relative;
	float:left;
	background:#e3e3e3;
	font-family:PFDinTextCondProL, Arial, Helvetica, sans-serif;
	font-size:37px;
	text-align:center;
	color:#1d3145;
	display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap{
	z-index:1;
	/*display:none;*/
	width:339px;
	height:115px;
	position:relative;
	float:left;
	margin:23px 30px 14px 43px;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forMainDayWrap {
	z-index:1;
	/*display:none;*/
	width:258px;
	height:115px;
	position:relative;
	float:left;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forMainDayWrap .forMainDayUp{
	z-index:1;
	/*display:none;*/
	width:258px;
	height: 81px;
	position:relative;
	float:left;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forMainDayWrap .forMainDayDown{
	z-index:1;
	/*display:none;*/
	width: 100%;
	height: 34px;
	position:relative;
	float: left;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forMainDayWrap .forMainDayUp .forDayIcon{
	z-index:1;
	/*display:none;*/
	width:92px;
	height: 81px;
	position:relative;
	float:left;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forMainDayWrap .forMainDayUp .forDayTemp{
	z-index:1;
	/*display:none;*/
	width: 165px;
	height: 81px;
	position:relative;
	float: left;
	font-family:PFDinTextCondProL, Arial, Helvetica, sans-serif;
	font-size:94px;
	color:#1d3145;
	display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
	text-align:left;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forMainDayWrap .forMainDayDown .forDayDesc{
	z-index:1;
	/*display:none;*/
	width: 100%;
	height: 34px;
	position:relative;
	font-family:PFDinTextCondProL, Arial, Helvetica, sans-serif;
	font-size:30px;
	text-align:center;
	color:#1d3145;
	display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forMainDayWrap .forMainDayUp .forDayIcon img {
	width:88%;
	height:auto;
	margin-right:11px;
	
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forBoforWrap {
	z-index:1;
	/*display:none;*/
	width:81px;
	height:115px;
	position:relative;
	float:left;
	background:#21a7c3;
}

#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forBoforWrap .forBoforArrow{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:76px;
	position:relative;
	float:left;
	background: url(../images/weather/arrow-wind.png) no-repeat center center;
}


#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forMainWrap .forBoforWrap .forBoforDesc{
	z-index:1;
	/*display:none;*/
	width:100%;
	height:40px;
	position:relative;
	float:left;
	font-family:PFDinTextCondProL, Arial, Helvetica, sans-serif;
	font-size:33px;
	color:#1d3145;
	display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}


#wrapper #background #weatherWrap #forecastWrap .forDayWrap .forDayLine{
	z-index:1;
	/*display:none;*/
	width:1px;
	height:139px;
	position:relative;
	float:left;
	background:#1d3145;
	margin-top:8px;
}