body
{
	color: white;
	font-family: 'Lato', sans-serif;
	background-image: url("img/background.jpg");
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0;
	text-align: center;
}

.container
{
	
width: 40%;
margin-left: 3%;
text-align: left;
}


@keyframes listfadein {
    from {opacity: 1;}
    to {opacity: 0;}
}
.block
{
	color: black;
	height: 2vw;//35px
	width: 100%;
	font-size: 2vw;
	padding-top: 5px;
	padding: 20px;
	padding-left: 15px;
	text-align: left;
	background-color: rgba(221, 221, 221, 0.55);
	border-bottom: 1px solid black;
}
.blocktemp
{
	color: black;
	height: 2vw;//35px
	width: 100%;
	font-size: 2vw;
	padding-top: 5px;
	padding: 20px;
	padding-left: 15px;
	text-align: left;
	background-color: rgba(221, 221, 221, 0.55);
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin-top: 65px;
}


#temp, #tempod, #tempmin, #tempmax, #hum, #brightness, #pressure
{
	font-size: 2vw;
	margin-right: 20px;
	float: right;
}
#date
{
	 text-shadow: 3px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
	width: 900px;
	margin-top: 10px;
	font-size: 40px;
	margin-left: 30px;
	margin-bottom: 30px;
}


.containerwind
{
	height: auto;
	font-size: 2vw;
	width: 40%;
	margin-right: 3%;
	text-align: left;
	margin-top: 35px;
	float: right;
}


/*.container:hover
{
	opacity: 0;
  -webkit-animation-timing-function: ease;

    -webkit-animation: listfadein 0.8s infinite;
    animation: listfadein 0.8s infinite;
	animation-iteration-count: 1;

}


.containerwind:hover
{
	opacity: 0;
  -webkit-animation-timing-function: ease;

    -webkit-animation: listfadein 0.8s infinite;
    animation: listfadein 0.8s infinite;
	animation-iteration-count: 1;

}
*/
.contentst
{
	color: black;
	height: 230px;
	width: 94%;
	font-size: 2vw;
	padding-top: 17px !important;
	padding: 20px;
	padding-left: 15px;
	text-align: left;
	background-color: rgba(221, 221, 221, 0.55);
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	
}

.content
{
	color: black;
	height: auto;
	width: 94%;
	font-size: 2vw;
	padding-top: 17px !important;
	padding: 20px;
	padding-left: 15px;
	background-color: rgba(221, 221, 221, 0.55);
	border-bottom: 1px solid black;
}

.text
{
	padding-right: 10px;
		float: right;
		font-size: 2vw;
}
#porywy
{
	text-align: center;
	color: black;
	height: 2vw;
	width: 94%;
	font-size: 1.8vw;
	padding-top: 17px !important;
	padding: 20px;
	padding-left: 15px;
	background-color: rgba(221, 221, 221, 0.55);
	border-bottom: 1px solid black;
}

.footer
{
	text-align: center;
		width: 100%;
	background-color: rgba(30, 30, 30, 0.65);
	padding-top: 25px;
	padding-bottom: 25px;
	opacity: 0.8;
	color: #dddddd;
	margin-top: 300px;	
}

.seba
{
	text-decoration: none;
	color: #dddddd;
	opacity: 1;
}
.compass
{
	text-align: center;
	margin-right: 50px;

}

#zegar
{
	float: right;
	display: block;
	font-size: 65px;
	margin-right: 15%;
	width: 200px;
	color: #fff;
    text-shadow: 3px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
#speed
{
		padding-right: 10px;
		float: right;
		font-size: 1.8vw;
}
.link
{
margin: 0;
	width: 50px;
	height: 50px;
	float: right;
	background-color: #cc1400;
-webkit-box-shadow: -5px 5px 10px -2px rgba(0,0,0,0.8);
-moz-box-shadow: -5px 5px 10px -2px rgba(0,0,0,0.8);
box-shadow: -5px 5px 10px -2px rgba(0,0,0,0.8);
}


a.socials
{
	display: block;
	text-decoration: none;
	height: 50px;
	color: white;
	
}
.link:hover
{
	background-color: #aa0200;
}
.twojeip
{

	float: left;
	margin-top: 2%px;
	margin-left: 3%;
	padding-bottom: 51px;
}
#linkrowien
{
margin-right: 9px; 
background-color: #028e00;

	width: 50px;
	height: 50px;
	float: right;
-webkit-box-shadow: -5px 5px 10px -2px rgba(0,0,0,0.8);
-moz-box-shadow: -5px 5px 10px -2px rgba(0,0,0,0.8);
box-shadow: -5px 5px 10px -2px rgba(0,0,0,0.8);
}
#linkrowien:hover
{
background-color: #017d00;
}
#chart
{
width: 100%;
opacity: 0.8;
background-color: white;
text-align: center;
bottom: -300px;
margin-bottom: 52px;
position: relative;
}
#chart_div
{
text-align: center;
width: 1117px;
height: 460px;
margin-left: auto;
margin-right: auto;
}
.hover
{
margin: 0;
	width: 50px;
	height: 50px;
	float: left;
	background-color: #cc1400;
}


#all .hover:hover + .link + #linkrowien + .contentst
{
opacity: 0;
-webkit-box-shadow: -5px 5px 10px -2px rgba(0,0,0,0.8);
-moz-box-shadow: -5px 5px 10px -2px rgba(0,0,0,0.8);
box-shadow: -5px 5px 10px -2px rgba(0,0,0,0.8);
}

.airindex
{
	width: 200px;
height: 50px;
padding-top: 7px;
	background-color: red;
	float: left;
	margin-right: 3%;
	border-radius: 10px;
	font-size: 22px;
	text-align: center;
}
.airindex:hover #airlist
{
	display: block;
}

.pms
{
	background-color: red;
    width: 200px;
	height: 35px;
	padding-top: 10px;
	padding-bottom: 5px;
	font-size: 15px;
    display: none;
    color: white;
    text-decoration: none;
	text-align: center;
	border: 1px solid black;
	border-top: 0px;
	border-radius: 10px;
}
.airindex a
{
	text-decoration: none;
	color: white;
}
.airindex:hover .pms
{
    display: block;
}
.pmcontent
{
	width: 33.33%;
	float: left;
	
}
.list
{
	border-radius: 3px;
}
/*.arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left:-20px;
  margin-bottom: 50px;
}

.bounce {
	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	-o-animation-name: bounce;
	animation-name: bounce;
}
.animated{-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;

            animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}


@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}
*/