body {
	background-image: url('background.jpg');
	background-attachment: fixed;
	background-size: 999px auto;
	margin:0px;
}

footer {
	margin:auto;
	font-family: 'Philosopher', sans-serif;
	text-align: center;
	font-family: serif;
	color:#000000;
	clear:left;
}

main {
	font-family: 'Philosopher', sans-serif;
	padding:8px;
	margin:auto;
}

.space {
	height:106px;
}

#weather {
	width:100%;
	text-align: center;
}

.weatherBlock {
	float:left;
	margin:10px;
	margin-right: 70px;
	height: 330px;
}

.current {
	opacity:0.8;
	font-family: 'Philosopher', sans-serif;
	color: #000000;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	width:200px;
	height:200px;
	padding:20px;
	border-radius: 50%;
	border:4px solid #ffffff;
	float:left;
}

.content {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.currenttemp {
	font-size:80px;
	margin:0px;
	padding:3px;
}

.currenttext {
	font-size:15px;
	margin:0px;
	padding:3px;
}

.forecast {
	float:left;
	font-family: 'Dosis', sans-serif;
	color: #000000;
	text-align: center;
	width:190px;
	height:200px;
	padding:20px;
}
.forecastInfo {
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: right top;
	opacity:0.7;
	font-size: 14px;
	width:180px;
	margin:5px;
	padding:5px;
	border-radius: 0px 70px 70px 0px;
	text-align: left;
}

h1 {
	font-family: 'Dosis', sans-serif;
	font-size:80px;
	color: #000000;
	margin:0px;
	text-transform: uppercase;
	width:100%;
	text-align: center;
	background-color: #ffffff;
	position: absolute; top:0px; left:0px;
	height:100px;
	opacity:0.7;
}

h2 {
	font-family: 'Dosis', sans-serif;
	font-size:20px;
	color: #000000;
	font-weight: bold;
	margin:0px;
	padding:3px;
	text-transform: uppercase;
}

h3 {
	font-family: 'Dosis', sans-serif;
	font-size:13px;
	color: #000000;
	font-weight: bold;
	margin:0px;
	padding:3px;
	text-transform: uppercase;
}

.selectCity {
	padding: 3px;
	background: #ffffff;
	opacity:0.7;	
	font-family: 'Dosis', sans-serif;
	color: #000000;
	text-transform: uppercase;
	border-radius: 4px;
	margin:auto;
	font-size: 30px;
	border:0px;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.selection {
	text-align: center;
}

#info {
	position:fixed; right: 0px; top: 150px;
	width:60px;
	border-radius: 4px 0px 0px 4px;
	background: #ffffff;
	opacity:0.7;
	padding:3px;
	font-family: 'Dosis', sans-serif;
	color: #000000;
	text-transform: uppercase;
	font-weight: bolder;
}
#info p {
	transform:rotate(-90deg);
}
.infocontent {
	width:80%;
	margin:auto;
	position:fixed; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	padding:5px;
	border-radius: 100px;
	background-color: #ffffff;
	opacity:0.9;
	font-family: 'Philosopher', sans-serif;
	color: #000000;
	font-size: 18px;
	text-align: center;
	display: none;

}


@media all and (min-width: 1000px) {
	body {
		background-size: 1600px auto;
	}

}

@media all and (min-width: 1601px) {
	body {
		background-size: 1800px auto;
	}
}
@media all and (min-width: 1801px) {
	body {
		background-size: 2000px auto;
	}
}

@media all and (max-width: 800px) {
	h1 {
		font-size:40px;
		height:70px;
	}

	.space {
		height:50px;
	}
	.current {
		clear:left;
		margin:auto;
	}
	.weatherBlock {
		margin:10px;
		clear:left;
	}
}

@media all and (max-width: 541px) {
	.weatherBlock {
		height:580px;
	}
	.current {
		margin-bottom: 55px;
	}
	#info {
	font-size: 13px;
	width:40px;

}