@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 200;
  src: local('Helvetica Neue'), local('HelveticaNeue-Regular'), url(../font/helveticaneue-webfont.woff) format('woff');
}

html{
	height:100%;
	-ms-touch-action: none;}
body{margin:0;
	font-family: 'Helvetica Neue', sans-serif;
	font-size:100%;
	line-height:1.5;
	position:relative;
	height:100%;
	background:#000;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
	/* On modern browsers, prevent the whole page to bounce */
	overflow: hidden;
}
.swiper-container{width:100%;height:100%;color:#fff;text-align:center;}

.default-slide{background:#336699;transition: background 2.5s ease,padding 0.8s linear;}
.red-slide{background:#D94D43;}
.blue-slide{background:#4A5A6B;}
.orange-slide{background:#F76B39;}
.green-slide{background:#FFB742;}
.pink-slide{background:#52C6DE;}

.default-slide.day{
	background: -webkit-linear-gradient(rgba(255,255,255,0.5), #336699); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(255,255,255,0.5), #336699); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(255,255,255,0.5), #336699); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(255,255,255,0.5), #336699); /* Standard syntax */
}.default-slide.night{
	background: -webkit-linear-gradient(rgba(0,0,0,0.5), #336699); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(0,0,0,0.5), #336699); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(0,0,0,0.5), #336699); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(0,0,0,0.5), #336699); /* Standard syntax */
}
.red-slide.day{
	background: -webkit-linear-gradient(rgba(255,255,255,0.5), #D94D43); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(255,255,255,0.5), #D94D43); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(255,255,255,0.5), #D94D43); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(255,255,255,0.5), #D94D43); /* Standard syntax */
}.red-slide.night{
	background: -webkit-linear-gradient(rgba(0,0,0,0.5), #D94D43); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(0,0,0,0.5), #D94D43); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(0,0,0,0.5), #D94D43); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(0,0,0,0.5), #D94D43); /* Standard syntax */
}
.blue-slide.day{
	background: -webkit-linear-gradient(rgba(255,255,255,0.5), #4A5A6B); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(255,255,255,0.5), #4A5A6B); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(255,255,255,0.5), #4A5A6B); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(255,255,255,0.5), #4A5A6B); /* Standard syntax */
}.blue-slide.night{
	background: -webkit-linear-gradient(rgba(0,0,0,0.5), #4A5A6B); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(0,0,0,0.5), #4A5A6B); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(0,0,0,0.5), #4A5A6B); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(0,0,0,0.5), #4A5A6B); /* Standard syntax */
}
.orange-slide.day{
	background: -webkit-linear-gradient(rgba(255,255,255,0.5), #F76B39); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(255,255,255,0.5), #F76B39); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(255,255,255,0.5), #F76B39); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(255,255,255,0.5), #F76B39); /* Standard syntax */
}.orange-slide.night{
	background: -webkit-linear-gradient(rgba(0,0,0,0.5), #F76B39); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(0,0,0,0.5), #F76B39); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(0,0,0,0.5), #F76B39); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(0,0,0,0.5), #F76B39); /* Standard syntax */
}
.green-slide.day{
	background: -webkit-linear-gradient(rgba(255,255,255,0.5), #FFB742); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(255,255,255,0.5), #FFB742); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(255,255,255,0.5), #FFB742); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(255,255,255,0.5), #FFB742); /* Standard syntax */
}.green-slide.night{
	background: -webkit-linear-gradient(rgba(0,0,0,0.5), #FFB742); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(0,0,0,0.5), #FFB742); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(0,0,0,0.5), #FFB742); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(0,0,0,0.5), #FFB742); /* Standard syntax */
}
.pink-slide.day{
	background: -webkit-linear-gradient(rgba(255,255,255,0.5), #52C6DE); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(255,255,255,0.5), #52C6DE); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(255,255,255,0.5), #52C6DE); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(255,255,255,0.5), #52C6DE); /* Standard syntax */
}.pink-slide.night{
	background: -webkit-linear-gradient(rgba(0,0,0,0.5), #52C6DE); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(0,0,0,0.5), #52C6DE); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(0,0,0,0.5), #52C6DE); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(0,0,0,0.5), #52C6DE); /* Standard syntax */
}


.swiper-slide{
	width:100%;
	height:100%;
}
.swiper-slide .title{font-style:italic;font-size:42px;margin-top:80px;margin-bottom:0;line-height:45px;}
.pagination{
	position:absolute;z-index:20;left:10px;bottom:2.5px;
	
}
.paginationbg{
	width:100%;
	background:#FF4E00;
	opacity: 0.75;
	position:absolute;z-index:0;left:0px;bottom:0px;
	height:40px;
	
}

.pagination .swiper-pagination-switch:first-child{
	border:none;
	border-radius: none;
	margin-top:15px;
	height:12px;
	width:12px;
	/*
	background: url(../img/icons.png) no-repeat -209px -176px;
	*/
	background-image: url(../img/location.svg);
	background-size: cover;
	background-color:transparent;
	opacity: 0.25;
}
.pagination .swiper-pagination-switch.swiper-active-switch:first-child {
	/*
	background: url(../img/icons.png) no-repeat -209px -426px;
	*/
	background-image: url(../img/location.svg);
	background-color:transparent;
	opacity: 1;
}
.swiper-pagination-switch{
	display:inline-block;
	width:8px;
	height:8px;
	border-radius:8px;
	background:rgba(255,255,255,0.25);
	margin-right:5px;
	opacity:0.9;
	border:1px solid rgba(255,255,255,0.5);
	cursor:pointer;}
.swiper-visible-switch{background:#aaa;}
.swiper-active-switch{
	background-color:#fff;
	border:1px solid #fff;
}



.wrapper {
	/*
	position:absolute; 
	z-index:1;
	top:0; 
    bottom:0;
    left:0;
	width:100%;
	*/
	
	/* Prevent native touch events on Windows */
	-ms-touch-action: none;
	
	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

.scroller {
	/*
	position: absolute;
	z-index: 1;
	width: 100%;
	*/

	/* Prevent elements to be highlighted on tap */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Put the scroller into the HW Compositing layer right from the start */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

/*
	UI ELEMENTS
*/
.weather{
	height:100%;
}
/*
.weather .header{
	height:50px;
	background:rgba(0,0,0,0.05);
	margin:0;
	text-align: left;
	font-size:1.4em;
}
.weather .header .left{
	float:left;
	width:80%;
	line-height:50px;
}

.weather .header .right{
	float:right;
	width:20%;
	text-align: right;
	line-height:50px;
}
*/

.btnsettings{
	position:absolute;
	top:0;
	right:0;
	z-index:99;
	height: 30px !important;
	width: 30px !important;
	
	
}

.weather .header .locstamp{
	display:inline-block;
}
.weather .header .datestamp{
	display:inline-block;
	margin-left:10px;
	font-size:0.65em;
}
.weather .header .connector{
	font-size:0.75em;
	color:rgba(255,255,255,0.5);
}


.weather .header .timestamp{
	
}

.weather .daycast{
	margin:0;
}
.weather .temp{
	margin:0;
	padding:0;
	text-align:center;
}
.weather .temp .reading{
	font-size:32.5vh;
	line-height:28vh;
	display:inline-block; 
	vertical-align:top;
}.weather .temp .degree{
	font-size:10vh;
	display:inline;
	vertical-align:top;
}

.weather .daycast .daysum{
	
}

.weathericon svg{
	max-width:100%;
	height:10vh;
	float:right;
	margin-top:-0.5vh;
}
.weatherminiicon{
	display:inline-block;
	
}
.weatherminiicon svg{
	height:5vh;
	vertical-align: middle;
}

.weather .daycast .todayinfo{
	font-size:2.5vh;
	text-align:right;
	padding:5%;
	line-height:2.0vh;
}
.temprange{
	float:left;
	font-size:1.5em;
	line-height:2.0vh;
}.temprange .high{
	display:inline-block;
}.temprange .low{
	display:inline-block;
	margin-left:10px;
	color: rgba(255,255,255,0.5);
}

.temprange .high img.rangeicon.high{
	
}.temprange .high img.rangeicon.high{
	
}



.weather .daycast .todayinfo .daystamp{
	display:inline-block;
	font-size:4vh;
}
.weather .daycast .todayinfo .today{
	display:inline-block;
	color:rgba(255,255,255,0.5);
}

.weather .forecast{
	margin-top:-2.5%;
	text-align:center;
	position:relative;
	width:100%;
	height:100%;
	margin-top:0;
}

.weather .forecast ul{
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
}
.weather .forecast ul li{
	list-style-type: none;
	padding:1.5%;
	border-top:2px solid rgba(255,255,255,0.5);
	margin:2.5px;
}.weather .forecast ul li.last{
	border-bottom:2px solid rgba(255,255,255,0.5);
}

.weather .forecast ul li .innerheader .nday{
	display:inline-block;
}

.weather .forecast ul li .innerheader .tomorrow{
	display:inline-block;
	color:rgba(255,255,255,0.5);
	font-size:2vh;
}

.weather .forecast ul li .innerheader{
	text-align:left;
	font-size:3vh;
}
.weather .forecast ul li .innerheader .itemps{
	float:right;
}
.weather .forecast ul li .innerheader .itemps .high{
	display:inline-block;
	vertical-align:middle;
}.weather .forecast ul li .innerheader .itemps .low{
	display:inline-block;
	color:rgba(255,255,255,0.5);
	vertical-align:middle;
}

.weather .forecast .details{
	position:relative;
	padding:2%;
	font-size:2.5vh;
}
.weather .forecast .details .left{
	text-align:left;
	width:50%;
	float:left;
}
.weather .forecast .details .right{
	text-align:left;
	width:50%;
	float:right;
}

.climacon{
	fill: white;
	stroke-width: 0%;
	stroke: black;
}

.search, .settings{
	background:#333;
	width: 100%;
	height: 100%;
}

.clearboth{
	clear:both;
}

.header{
	position:relative;
}

ul #location-list{
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: left;
}

#units,
#search-page{
	font-size:4em;
	text-align: center;
}#search-page{
	font-size:2em;
}
#units .btnSettings{
	display:inline-block;
	margin:5px;
	margin-left:10px;
	color:rgba(255,255,255,0.5);
	z-index: 99;
}
#units .btnSettings.selected{
	color:#fff;
}
#units .btnSettings a{
	color:rgba(255,255,255,0.2);
}

ul.locresults{}
ul.locresults li{
	border-top:solid 1px #fff;
	height:65px;
	padding:5px;
	overflow: hidden;
}
ul.locresults li .left{
	display:inline-block;
	overflow:hidden;
	width:80%;
}
ul.locresults li .right{
	float:right;
}

ul.locresults li .right a{
	margin-top:20px;
}

ul.locresults li h2,
ul.locresults li p{
	margin:0;

}
ul.locresults li .micro{
	font-size:0.5em;
}

img.wdirection{
	height:10px;
	width:10px;
}

.copyright{
	text-align:right;
	font-size:0.5em;
}

/*
	LOADER
*/

.pageload-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index:999;
    background:#336699;
    opacity: 0.95;
    display: table-cell;
    vertical-align: middle;
	text-align: center;
    visibility: hidden;
    opacity:1;
    margin: auto;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
.pageload-overlay.show {
    visibility:visible;
	opacity:1;
	transition: visibility 0s 2s, opacity 2s linear;
}

.nsew{
	text-transform: lowercase;
}

.logo{
	width: 100%;
	height: 250px;
}
.logotext{
	font-size:3em;
	margin-top: -50px;
}
.weatherbg{
	height:200%;
	width:200%;
	overflow: hidden;
}
.weatherbg img{
	width:100%;
	height:100%;
	opacity: 0.5;
}