html {
	height: 100%;
}
body {
	font-family: 'Open Sans', sans-serif;
	background-color: black;
	background-image: url("bg1.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}​
html,body {
-webkit-animation: fadein 1s;
   -moz-animation: fadein 1s;
-ms-animation: fadein 1s;
 -o-animation: fadein 1s;
	animation: fadein 1s;
}
@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@-moz-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@-webkit-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@-ms-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@-o-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
#main, .main {
	margin-left: 32px;
	float: left;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#otsikko, .live-tile {
	opacity: 0;
	animation: fadeIn ease-in 1;
	animation-fill-mode: forwards;
	animation-duration: 0.8s;
}
#otsikko {
	animation-delay: 0.1s;
	position: relative;
	left: 2%;
	width: 300px;
	font-size: 48px;
	color: white;
	text-shadow: 1px 1px 5px black;
	font-weight: normal;
}
h1, h2, h3 {
	font-weight: normal;
}
.live-tile .tile-title, .list-tile .tile-title, .copy-tile .tile-title {
	font-size: 14px;
	padding: 5px;
}
#tile_palvelut div {
	font-size: 28px;
	padding: 5px 10px;
}
.top_bar {
	height: 50px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}
.inner {
	margin: 50px;
	color: white;
}
.non-clickable {
	cursor: default;
}
.top_bar div {
	float: right;
	padding: 5px;
	cursor: pointer;
	color: white;
	font-size: 50px;
	position: absolute;
	right: 0;
	top: -15px;
}
.etatuki_nappi {
	border: 4px solid white;
	background-color: #0564c8;
	padding: 10px;
	border-radius: 12px;
	color: white;
	text-decoration: none;
	display: inline-block;
}
.etatuki_nappi img {
	width: 27px;
	margin: -6px 3px;
}
.otsikko {
	font-size: 30px;
	display: block;
	margin: 5px;
}
.otsikko-pieni {
	font-size: 18px;
	display: block;
        margin: 5px;
	font-weight: bold;
}
#modal_yhteys .inner {
	color: white !important;
}

/* tiles */
html body .mango.accent, html body .mango.live-tile > .accent, html body .mango.list-tile > .accent, html body .mango.copy-tile > .accent, html body .mango.live-tile > div, html body .mango.copy-tile > div,html body .mango.list-tile > div, html body .mango.live-tile > .face, html body .mango.list-tile > .face, html body .mango.copy-tile > .face, html body .mango.live-tile > .slide, html body .mango.live-tile > .flip-back,html body .mango.live-tile > .flip-front, html body .mango.live-tile > .slide-back, html body .mango.live-tile > .slide-front, html body .mango.flip-list > li > .accent, html body .mango.flip-list > li > .flip-back,html body .mango.flip-list > li > .flip-front, html body .mango.slide.accent, html body .mango.slide-front.accent, html body .mango.slide-back.accent, html body .mango.flip-front.accent,html body .mango.flip-back.accent {
	background-color: rgba(205, 215, 60, 0.6) !important;
}
.mango .accent, .mango .accentBg, .mango .accentBgHover:hover, .mango .accentBgHover a:hover, .mango .live-tile > div, .mango .copy-tile > div, .mango .live-tile > .face, .mango .copy-tile > .face, .mango .live-tile > .slide, .mango .live-tile > .flip-back, .mango .live-tile > .flip-front, .mango .live-tile > .slide-back, .mango .live-tile > .slide-front, .mango .list-tile > div, .mango .flip-list > li > div {
	background-color: rgba(205, 215, 60, 0.0) !important;
}
html body .blue.accent, html body .blue.live-tile > .accent, html body .blue.list-tile > .accent, html body .blue.copy-tile > .accent, html body .blue.live-tile > div, html body .blue.copy-tile > div,html body .blue.list-tile > div, html body .blue.live-tile > .face, html body .blue.list-tile > .face, html body .blue.copy-tile > .face, html body .blue.live-tile > .slide, html body .blue.live-tile > .flip-back,html body .blue.live-tile > .flip-front, html body .blue.live-tile > .slide-back, html body .blue.live-tile > .slide-front, html body .blue.flip-list > li > .accent, html body .blue.flip-list > li > .flip-back,html body .blue.flip-list > li > .flip-front, html body .blue.slide.accent, html body .blue.slide-front.accent, html body .blue.slide-back.accent, html body .blue.flip-front.accent, html body .blue.flip-back.accent {
	background-color: rgba(8, 62, 126, 0.6) !important;
}
.blue .accent, .blue .accentBg, .blue .accentBgHover:hover, .blue .accentBgHover a:hover, .blue .live-tile > div, .blue .copy-tile > div, .blue .live-tile > .face, .blue .copy-tile > .face, .blue .live-tile > .slide, .blue .live-tile > .flip-back, .blue .live-tile > .flip-front, .blue .live-tile > .slide-back, .blue .live-tile > .slide-front, .blue .list-tile > div, .blue .flip-list > li > div {
	background-color: rgba(8, 62, 126, 0.0) !important;
}
html body .lime.accent, html body .lime.live-tile > .accent, html body .lime.list-tile > .accent, html body .lime.copy-tile > .accent, html body .lime.live-tile > div, html body .lime.copy-tile > div,html body .lime.list-tile > div, html body .lime.live-tile > .face, html body .lime.list-tile > .face, html body .lime.copy-tile > .face, html body .lime.live-tile > .slide, html body .lime.live-tile > .flip-back,html body .lime.live-tile > .flip-front, html body .lime.live-tile > .slide-back, html body .lime.live-tile > .slide-front, html body .lime.flip-list > li > .accent, html body .lime.flip-list > li > .flip-back,html body .lime.flip-list > li > .flip-front, html body .lime.slide.accent, html body .lime.slide-front.accent, html body .lime.slide-back.accent, html body .lime.flip-front.accent, html body .lime.flip-back.accent {
	background-color: rgba(100, 0, 100, 0.6) !important;
}
.lime .accent, .lime .accentBg, .lime .accentBgHover:hover, .lime .accentBgHover a:hover, .lime .live-tile > div, .lime .copy-tile > div, .lime .live-tile > .face, .lime .copy-tile > .face, .lime .live-tile > .slide, .lime .live-tile > .flip-back, .lime .live-tile > .flip-front, .lime .live-tile > .slide-back, .lime .live-tile > .slide-front, .lime .list-tile > div, .lime .flip-list > li > div {
	background-color: rgba(150, 0, 150, 0.0) !important;
}
html body .red.accent, html body .red.live-tile > .accent, html body .red.list-tile > .accent, html body .red.copy-tile > .accent, html body .red.live-tile > div, html body .red.copy-tile > div,html body .red.list-tile > div, html body .red.live-tile > .face, html body .red.list-tile > .face, html body .red.copy-tile > .face, html body .red.live-tile > .slide, html body .red.live-tile > .flip-back,html body .red.live-tile > .flip-front, html body .red.live-tile > .slide-back, html body .red.live-tile > .slide-front, html body .red.flip-list > li > .accent, html body .red.flip-list > li > .flip-back,html body .red.flip-list > li > .flip-front, html body .red.slide.accent, html body .red.slide-front.accent, html body .red.slide-back.accent, html body .red.flip-front.accent, html body .red.flip-back.accent {
	background-color: rgba(135, 0, 20, 0.6) !important;
}
.red .accent, .red .accentBg, .red .accentBgHover:hover, .red .accentBgHover a:hover, .red .live-tile > div, .red .copy-tile > div, .red .live-tile > .face, .red .copy-tile > .face, .red .live-tile > .slide, .red .live-tile > .flip-back, .red .live-tile > .flip-front, .red .live-tile > .slide-back, .red .live-tile > .slide-front, .red .list-tile > div, .red .flip-list > li > div {
	background-color: rgba(105, 0, 20, 0.0) !important;
}

/* responsive */
@media only screen and (max-width: 1280px) {

	html {
		background-size: auto;
	}

}
@media only screen and (max-width: 400px) {

	#main, .main {
		margin-left: 0;
	}
	#otsikko {
		display: none;
	}
	.inner {
		margin: 20px;
	}
	#otsikko, .live-tile {
		opacity: 1;
	}
	.live-tile, .list-tile, .copy-tile, .tile-strip .flip-list > li {
		width: 170px;
		height: 170px;
	}
	.live-tile.two-wide, .list-tile.two-wide, .copy-tile.two-wide, .tile-strip .flip-list > li.two-wide {
                width: 350px;
                height: 170px;
	}

}