@charset "utf-8";
body {
	font: 100%/1.2 Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #828282;
	background: #FFFFFF;
}

ul, ol, dl {
	padding: 0 0 0 20;
	margin: 0;
}
li {
	color: #fcd19a;
	margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
}
h1 {
	color: #2a2a2a;
}
h2, h3 {
	color: #616161;
}
a img { 
	border: none;
}

a:link {
	color: #ea9f23;
	text-decoration: none;
}
a:visited {
	color: #ea9f23;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	text-decoration: none;
	color: #f5cf35;
}
.desarute {
    filter: grayscale(60%);
}

.mainWidth {
	width: 80%;
	margin-left: auto; margin-right: auto;
}
.vCenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.clear {
	clear: both;
}
.left { float: left; }
.right { float: right; }
.center {
	text-align: center;
}
.lineSmall {
	height: 1px;
	width: 50px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	border-bottom: 4px solid #2a2a2a;
}
.lineDiv {
	height: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
	border-top: 1px solid #e7e7e7;
}

img {
	max-width:100%;
	max-height:100%;
}
.font90 {
    font-size: 90%;
}
.font300 {
    font-size: 300% !important;
}
.txtRankNro {
    font-size: 160%;
    font-weight: bold;
    color: #ecdb23;
}
.txtBlueOts {
	font-size: 110%;
	text-transform: uppercase;
	color: #69abe8;
	font-weight: bold;
}
.txtBlue {
    color: #3d94d0;
}

.borderRound {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.bgBlue {
	color: #FFF;
	background: #2e7bb2;
}
.blink_me {
  animation: blinker 0.5s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0.6; }
}





header {
	background-color: #ADB96E;
}
header, section, footer, aside, article, figure {
	display: block;
}
.top {
	height: 70px;
}
.topLogged {
	color: #FFF;
	background: #2a2a2a;
	margin-bottom: 40px;
}
.top_in {
	height: 70px;
}
.top_logo {
	background: url(../images/logo_small.png) no-repeat left center;
	float: left;
	height: 70px;
	width: 200px;
}
.top_sessionInfo {
	font-size: 80%;
	text-transform: uppercase;
	color: #a8cad7;
	overflow: hidden;
	position: absolute;
	left: 280px;
	top: 50px;
}
.top_sessionInfo strong {
	color: #ffd52b;
	font-size: 110%;
}

.naviIconHome {
	background: url(../images/icon_home.png) no-repeat center center;
	background-size: 100%;
	float: left;
	height: 40px;
	width: 40px;
	margin-right: 25px;
	margin-top: -5px;
}
.naviIconHome:hover {
    background: url(../images/icon_home_on.png) no-repeat center center;
    background-size: 100%;    
}
.naviIconOut {
	background: url(../images/icon_logout.png) no-repeat center center;
	background-size: 100%;
	float: right;
	height: 40px;
	width: 40px;
	margin-right: 25px;
	margin-top: -5px;
}
.naviIconOut:hover {
    background: url(../images/icon_logout_on.png) no-repeat center center;
    background-size: 100%;    
}

.userNavi {
	color: #CCC;
	height: 30px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-transform: uppercase;
	font-size: 85%;
	position: relative;
}
.userNaviLink {
	line-height: 30px;
	float: left;
	height: 30px;
	margin-right: 20px;
	padding-right: 15px;
	padding-left: 15px;
}





.front_header {
	background: url(../images/bg_header.jpg) no-repeat center center;
	height: 250px;
	position: relative;
}
.headerLogo {
	background: url(../images/logo_iso.png) no-repeat center bottom;
	background-size: 100% 100%;
	height: 88px;
	width: 282px;
	position: absolute;
	bottom: -27px;
	margin-right: auto;
	margin-left: auto;
	left: 0px;
	right: 0px;
}

.naviMain {
	text-align: center;
	height: 80px;
	margin-right: auto;
	margin-bottom: 80px;
	margin-left: auto;
	border-bottom: 1px solid #e7e7e7;
	text-transform: uppercase;
	word-spacing: 1em;
	font-weight: bold;
}
.naviMain a {
	padding: 5px;
}
.naviMain a:hover {
	border-bottom: 2px solid #ea9f23;	
}
.naviValittu {
	border-bottom: 2px solid #ea9f23;
}

.mobileLogin {
    display: table;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 20px;
    display: none;
}

.wrap_content {
	margin-bottom: 40px;
	padding-bottom: 40px;
}
.sisalto {
}
.halfDiv {
    width: 50%;
    float: left;
}
.divContent {
	padding-right: 10%;
	padding-bottom: 20px;
	padding-left: 10%;
}

.insCardField {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e7e7e7;
}
.korttipohja {
	background: #000;
	margin: 10px;
	padding: 10px;
	float: left;
	height: 480px;
	width: 280px;
	overflow: hidden;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.korttiSisalto {
	background: #FFF;
	height: 480px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
}
.korttiNimiWrap {
	height: 40px;
	padding-top: 10px;
}
.korttiNimi {
	font-size: 90%;
	line-height: 30px;
	color: #FFF;
	background: #b38851;
	text-align: center;
	height: 30px;
	margin-right: 10px;
	overflow: hidden;
	margin-left: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.korttiKuva {
    background-position: center center;
    background-repeat: no-repeat;
	height: 170px;
}
.korttiPointsWrap {
	text-align: center;
	height: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
}

.korttiPoints {
	background: #818181;
	height: 50px;
	width: 80px;
	display: inline-block;
	margin: 0 3px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #646464;
	color: #FFF;
}
.korttiInfoWrap {
	color: #FFF;
	background: #413220;
	height: 180px;
	padding-top: 10px;
}

.korttiInfo {
	color: #FFF;
	padding: 10px;
	height: 150px;
	border: 1px dotted #766858;
	margin-right: 10px;
	margin-left: 10px;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
    background: #34281a;
}
.korttiInfoTxt {
	font-size: 70%;
	text-align: center;
	height: 40px;
	margin-bottom: 10px;
	overflow: hidden;
}
.korttiRow {
	font-size: 90%;
	line-height: 15px;
	height: 15px;
	margin-bottom: 5px;
}
.korttiRowTxt {
	float: left;
	width: 50%;
	overflow: hidden;
}
.pstColor {
    color: #feba18;
    font-weight: bold;
    font-size: 110%;
}
.timeBox {
	text-transform: uppercase;
	background: #E99820;
	text-align: center;
	margin: 5px;
	float: left;
	height: 60px;
	padding-right: 10px;
	padding-left: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.timeBoxTxt {
	font-size: 80%;
	line-height: 20px;
	color: #FFF;
	height: 20px;
}
.timeBoxNro {
	color: #616161;
	height: 30px;
	width: 60px;
	margin-right: 10px;
	margin-left: 10px;
	background: #FFF;
	font: 140%/30px 'Bungee', cursive;
}
.welcome {
	text-align: center;
	margin: 20px auto;
	width: 90%;
	max-width: 800px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 5px solid #E99820;
	padding: 20px;
}
.home_profile {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e7e7e7;
}
.profLeft {
    float: left;
}
.home_profile_avatar {
	background-image: url(../images/avatars/default1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	height: 200px;
	width: 200px;
	margin: 0 auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: relative;
}
.home_profile_lvl {
	color: #FFF;
	text-align: center;
	height: 50px;
	width: 60px;
	overflow: hidden;
	position: absolute;
	z-index: 11;
	top: -20px;
	right: -10px;
	background: #E99820;
	padding-top: 10px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

.home_profile_userinfo {
	float: left;
    width: calc(95% - 220px);
}
.home_profile_nimi {
	text-transform: uppercase;
	color: #2a2a2a;
	font-size: 160%;
	font-weight: bold;
}
.home_profile_xpLevel {
	font-size: 80%;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.home_profile_tieto {
	font-weight: bold;
	color: #2a2a2a;
	text-transform: uppercase;
	font-size: 90%;
}
.home_profile_tieto2 {
	font-size: 70%;
	font-weight: bold;
	text-transform: uppercase;
	color: #828282;
	margin-bottom: 20px;
}
.home_mapWrap {
	margin-bottom: 20px;
}
.home_clupMember {
	height: 50px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.vitriini {
    text-align: center;
    color: #FFF;
    padding: 10px;
    background: #3c8f34;
}
.vitriiniBox {
    display:inline-block;
    margin: 5px;
    width: 140px;
    height: 85px;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
}
.vitriiniBox:hover {
    box-shadow: 0px 0px 50px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(2);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(2);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(2);
    transition: all 200ms ease-in;
    transform: scale(2);
}
.vitriiniInfo {
    display:  none;
    width: 15px;
    height: 15px;
    color: #fff;
    text-align: center;
    line-height: 15px; font-size: 80%;
    background: #3aa0e0;
    position: absolute; margin: 5px;
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
.vitriiniInfo:hover {
    background: #2d7fb3;    
}
.vitriiniOsasto {
	font-weight: normal;
	text-transform: uppercase;
	margin-top: 15px;
	padding-top: 30px;
	padding-bottom: 5px;
	border-top: 1px solid #e7e7e7;
}

.vitriini h2, .vitriini p {
    color: #FFF;
    margin: 0; padding: 0;
}
.mapscreen {
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	max-width: 800px;
}
.mapOver {
    float:left;
    width: 50%;
    position: relative;
    padding-bottom : 50%;
    text-align: center;
    opacity: 0;
    background: url(/images/opa75_black.png);
}
.mapOver:hover {
    opacity: 1;
}
.mapOverCont {
    position:absolute;
    height: 80%;
    width: 80%;
    margin: 10%;
    color: #fff;
}
.mapOverCont h2 {
    color: #fff;
}
.divAlue {
    padding: 10%;
    background: #FFF;
    color: #2a2a2a;
    cursor: pointer;
}
.valitseInfo {
    margin-bottom: 20px;
}
.alueWrap {
	text-align: center;
	float: right;
	width: 95%;
	margin-bottom: 20px;
}
.alueMapInfo {
	color: #FFF;
	background: #616161;
	height: 45px;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
}
.loytyiDiv {
    text-align: center;
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;    
}
.footLatestFindsWrap {
	padding-bottom: 30px;
	background: #000;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
}
.footLatestFind {
	margin: 10px;
    display: inline-block;
	border-radius: 50%;
    width: calc(8.332% - 20px);
    height: auto;
    padding-top: calc(8.332% - 20px);
	background: #FFF center center;
	background-size: cover;
}
.bottomfoot {
	line-height: 20px;
	color: #ffd690;
	background: #eba224;
	text-align: center;
	padding: 15px;
}
.bottomfootBox {
	background: no-repeat left center;
	background-size: auto 100%;
	display: inline;
	margin-right: 10px;
	margin-left: 10px;
	padding-left: 20px;
	height: 20px;
	font-size: 80%;
}




.etsiTimeTxt {
	font-size: 80%;
	text-align: center;
}
.etsiMaastoTxt {
	font-size: 70%; color: #df5823;
	text-align: center;
    padding: 3px;
}
.etsiTime {
	font-weight: bold;
	color: #a02d2d;
	text-align: center;
}
.etsiVarustenimet {
    font-size: 70%;
	text-align: center;    
}
.sattumaTxt {
    max-width: 600px;
    padding: 10px;
    margin: 10px auto;
    color: #fff;
    background: #ae3a3a;
}


.kolmasosa {
	width: 33.33%;
	float: left;
}
.varustIcon {
	height: 30px;
	padding-left: 45px;
	padding-right: 10px;
	padding-top: 10px;
	font-size: 70%;
	text-transform: uppercase;
	overflow: hidden;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}


.find_wrap {
	text-transform: uppercase;
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
    margin-top: 20px;
}
.find_idNro {
	font-size: 120%;
	line-height: 80px;
	color: #FFFFFF;
	text-align: center;
	height: 80px;
	width: 80px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	font-weight: bold;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	background: #52a346;
}
.find_kuva {
	background: url(../images/loytokuvat/find_1475827148.jpg) no-repeat center center;
	height: 170px;
	width: 280px;
	margin-right: auto;
	margin-bottom: 15px;
	margin-left: auto;
}
.find_nimi {
	font-size: 160%;
	font-weight: bold;
	color: #2a2a2a;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
.find_info {
	font-size: 80%;
	text-align: center;
	margin-bottom: 20px;
}
.find_txt1 {
	font-size: 70%;
	text-align: center;
	color: #d1d1d1;
}
.find_txt2 {
	font-size: 110%;
    font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
	color: #7a7a7a;
}
.findPageName {
	font-size: 110%;
	font-weight: bold;
}
.findPagePic {
	height: 170px;
	width: 280px;
	margin-right: auto;
	margin-left: auto;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
}
.findPageKpl {
	font-size: 80%;
	margin-bottom: 20px;
}
.findPageOts {
	font-weight: bold;
	margin-bottom: 20px;
}
.findPageTxt {
	font-size: 80%;
	color: #acacac;
	text-transform: uppercase;
}
.findPageArvo {
	font-size: 130%;
	font-weight: bold;
	color: #3d94d0;
	margin-bottom: 20px;
}
.findPageRow {
	font-size: 80%;
	padding-top: 2px;
	padding-bottom: 2px;
	border-bottom: 1px solid #e7e7e7;
}
.findPageRowNro {
	font-weight: bold;
	text-align: center;
	float: left;
	width: 20px;
	margin-right: 5px;
}
.findPageRowCont {
	float: left;
	width: calc(19% - 5px);
	margin-right: 1%;
	overflow: hidden;
	text-align: center;
}
.isanta_pic {
	background: url(../images/isanta01.jpg) no-repeat center center;
	background-size: 100%;
	padding-bottom: 50%;
	width: 50%;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}
.isantaTxt {
	font-size: 80%;
	text-transform: uppercase;
	color: #828282;
}
.isantaNimi {
	font-size: 120%;
	font-weight: bold;
	text-transform: uppercase;
	color: #2a2a2a;
	margin-bottom: 25px;
}
.isantaDialogBox {
	color: #e9dbca;
	background: #664924;
	padding: 20px;
	margin-bottom: 20px;
}
.isantaDialogLine {
	margin-top: 20px;
	margin-bottom: 20px;
	border-top: 1px solid #a5998a;
}
.kiltaMemberWrap {
	text-transform: uppercase;
	margin: 1px;
	padding: 2px;
	float: left;
	height: 30px;
	width: calc(50% - 12px);
	border: 1px solid #e7e7e7;
	font-size: 90%;
	overflow: hidden;
}
.kiltaMemberKuva {
	background: no-repeat center center;
    background-size: cover;
	float: left;
	height: 30px;
	width: 30px;
	margin-right: 10px;
}
.kiltaMemberTxt {
	float: left;
	height: 30px; line-height: 30px;
	width: calc(100% - 80px);
}
.kiltaMemberRank {
	background: no-repeat center center;
    background-size: cover;
	float: left;
	height: 30px;
	width: 30px;
    margin-right: 10px;
}


















.skillBox {
	background: #e7e7e7;
	text-align: center;
	margin: 5px;
	padding: 5px;
	float: left;
	border: 1px solid #828282;
	width: calc(25% - 22px);
	overflow: hidden;
	font-size: 80%;
	text-transform: uppercase;
}
.skillBoxTxt {
	overflow: hidden;
	font-size: 90%;
}
.skillBoxArvo {
	font-size: 130%;
	font-weight: bold;
	color: #2a2a2a;
}
.skillBoxBar {
	background: #cdcdcd;
	height: 5px;
}
.skillBoxBar2 {
	background: #3c8f34;
	float: left;
	height: 5px;
	width: 10%;
}
.skillBoxBtn {
	margin-top: 10px;
}
.rankBox {
	font-size: 70%;
	text-transform: uppercase;
	color: #FFF;
	background: #9256a5;
	margin: 10px 5%;
	padding: 5px;
	float: left;
	width: calc(40% - 10px);
	text-align: center;
}
.rankBox:hover {
    background: #70427f;    
}
.stats_box {
	font-weight: bold;
	text-transform: uppercase;
	color: #FFF;
	text-align: center;
	margin: 2px;
	padding: 10px;
	float: left;
	height: 50px;
	width: calc(20% - 24px);
	overflow: hidden;
    display: table;
}
.stats_box:hover {
    opacity: 0.8;
}
.stats_box div {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
}

.feedWrap {
	margin-bottom: 10px;
	border-bottom: 1px solid #e7e7e7;
	padding-bottom: 10px;
}
.feedIcon {
	float: left;
	height: 40px;
	width: 40px;
	margin-right: 20px;
	border: 1px solid #e7e7e7;
	background-repeat:no-repeat; background-position: center center; background-size: cover;
}
.rplyIcon {
	float: left;
	height: 30px;
	width: 30px;
	margin-right: 10px;
	border: 1px solid #e7e7e7;
	background-repeat:no-repeat; background-position: center center; background-size: cover;
}
.feedTxt {
	float: left;
	width: calc(100% - 62px);
}
.rplyTxt {
	float: left;
    font-size: 80%;
	width: calc(100% - 42px);
}
.feedLikes {
	font-size: 75%;
	line-height: 20px;
	color: #3489e0;
	background: url(../images/peukku.png) no-repeat left center;
	background-size: 20px 20px;
	height: 20px;
	overflow: hidden;
	padding: 5px 0px 5px 25px;
}
.feedRply {
    position: relative;
    min-height: 15px;
    padding: 10px;
    background: #f8f8f8;
    border: #d0d0d0 solid 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.feedRply:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #f8f8f8;
    display: block;
    width: 0;
    z-index: 1;
    left: -10px;
    top: 7px;
}
.feedRply:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #d0d0d0;
    display: block;
    width: 0;
    z-index: 0;
    left: -11px;
    top: 7px;
}





.centDivsIn {
    position: relative;
    text-align:center;
    margin-bottom: 20px;
}
.centDiv {
    height: 100px;
    width: 100px;
    display:inline-block;
    margin: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.centDivNro {
    margin: 90px auto 0 auto;
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 5;
    background: #e67d16;
    color: #fff;
    font-size: 80%; line-height: 30px; text-align: center;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
}
.centDivNro[alt]:hover:after {
    content: attr(alt);
    padding: 4px 8px;
    color: #333;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background: url(/images/opa75_white.png);
}
.tiedotteetHeader {
    background-color: #277fb7;
    color: #fff;
    font-weight: bold;
    font-size: 85%;
    height: 25px;
    line-height: 25px;
    padding-left: 20px;
}
.tiedotteetWrap {
	font-size: 90%;
	margin: 0px auto 20px auto;
	padding: 15px;
	border: 1px solid #277fb7;
	overflow-y: auto;
	max-height: 250px;
}
.tiedotteetRivi {
	margin-bottom: 20px;
}
.notHome {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
    background: #616161; color: #fff;
    -webkit-box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.37);
    -moz-box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.37);
    box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.37);
    text-align: center;
}














.box50 {
	padding: 3%;
	width: 42%;
	text-align: center;
	font-size: 90%;
	margin-top: 2%;
	margin-bottom: 2%;
}






.row01 {
	margin-bottom: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px dashed #e7e7e7;
	font-size: 90%;
}
.row01Nro {
	text-align: center;
	width: 5%;
	overflow: hidden;
	float: left;
	margin-right: 5px;
}
.row01Nimi {
	float: left;
	width: 20%;
	margin-right: 5px;
	overflow: hidden;
}
.rown01Expa {
	float: right;
	width: 15%;
	margin-right: 5px;
	text-align: right;
	overflow: hidden;
}
.row02 {
	font-size: 90%;
	background: #f2f7fc;
	margin-bottom: 2px;
	padding: 5px;
}
.row02_25 {
	float: left;
	width: 23%;
	margin-right: 2%;
	overflow: hidden;
}

.row03 {
    margin-bottom: 1px;
	padding-top: 2.5px;
	padding-bottom: 2.5px; 
    font-size: 85%;   
}
.row03Nro {
    float: left;
    width: 20px;
    text-align: right;
    margin-right: 5px;
}
.row03Content {
    float: left;
    width: calc(50% - 30px);
    margin-right: 5px;
    overflow: hidden;
}
.row04 {
	text-transform: uppercase;
    height: 30px;
	padding: 0px;
	margin-bottom: 5px;
	font-size: 85%;
}
.row04:hover {
    background: #f6f6f6;
}
.row04_nro {
	text-align: right; line-height: 30px;
	width: calc(10% - 40px); height: 30px; 
	padding-right: 10px;
	float: left;
	font-weight: bold;
}
.row04Icon {
    height: 30px; width: 30px;
    margin-right: 5px; float: left;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
}
.row04_txt {
	float: left;
	width: calc(45% - 25px); height: 30px;
	padding-left: 10px;
	overflow: hidden;
    white-space: nowrap;
    line-height: 30px;
}
.latestFindWrap {
	background: #e7e7e7;
	padding: 1px;
}
.latestFindRow {
	background: #FFF;
	padding: 5px;
	margin-bottom: 1px;
}
.latestFindIcon {
	float: left;
	height: 40px;
	width: 40px;
	margin-right: 10px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.latestFindTxt {
	font-size: 90%;
	float: left;
	width: calc(100% - 50px);
	line-height: 90%;
}











.lvlBar {
    width: 100%;
    height: 5px;
    background: #c1cebf;
}
.lvlBarIn {
    float: left;
    height: 5px;
    background: #3c8f34;
}

.piipAnim {
    width: 200px;
    height: 155px;
    margin: 10px auto;
}



/* Squaret*/
.bgGrey {
    background-color: #828282;
    color: #fff;
}
.square100 {
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.square100:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.squareContent {
  position: absolute;
  width: 100%;
  height: 100%;
}

.square25 {
    float:left;
    position: relative;
    width: calc(25% - 10px);
    padding-bottom : calc(25% - 10px); /* = width for a 1:1 aspect ratio */
    margin:5px;
    overflow:hidden;
    text-align: center;
    opacity: 0.8;
}
.square25:hover {
    opacity: 1;    
}

.square25cont {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.box25Wrap {
	background: #FFF;
	padding: 1px;
}
.box25 {
	border: solid #65A7D1 1px;
	float: left;
	width: calc(25% - 4px);
	position: relative;
    margin: 1px;
}
.box25:before {
	content:'';
    padding: calc(50% - 4px) 0; /* vertical value as  100% equals width */
    display:inline-block;
}
.box25Img {
	height: 66.666%;
	position: absolute;
	top: 0px;
	width: 100%;
	background: #FFF;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.box25Txt {
	height: calc(33.333% - 5px);
	padding-top: 5px;
	position: absolute;
	top: 66.666%;
	background: #65A7D1;
	text-align: center;
	width: 100%;
	color: #FFF;
    font-size: 80%;
}



.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}


.roundBtnBack {
    background-color: #f7f7f7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
    background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
    background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
    background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
    background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
}

.icon_vaarat {
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;
}

.eiLupaa {
    padding: 10px;
    margin: 10px;
    display: inline-block;
    color: #fff;
    background: #d02723;
}
.eiLupaa:hover {
    background: #991c19;
    cursor: pointer;
}




.divLogin {
    font-size: 80%;
    margin-right: 5px;
    float: left;
}
.fo_nimi {
    margin-top: 10px;
}
.f_textbox {
    width: 100%; max-width: 250px;
    padding: 6px 0;
    text-indent: 5px;
}
.f_login {
    width: 110px;
    padding: 6px 0;
    text-indent: 5px;
    border-radius: 5px;
}
.btn {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 110%;
  background: #3498db;
  padding: 6px 15px 6px 15px;
  text-decoration: none;
  border: none;
}

.btn:hover {
  background: #3cb0fd;
  text-decoration: none;
  cursor: pointer;
}
.btn2 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 110%;
  background: #3498db;
  padding: 6px 15px 6px 15px;
  text-decoration: none;
  border: none;
}

.btn2:hover {
  background: #3cb0fd;
  text-decoration: none;
  cursor: pointer;
}

.btnDiv01 {
	font-size: 90%;
	text-transform: uppercase;
	color: #FFF;
	background: #2eb22e;
	text-align: center;
	margin: 10px;
	padding: 15px;
	min-width: 100px;
    display: inline-block;
}
.btnDiv01:hover {
	background: #218121;
	cursor: pointer;
}
.btnDiv02 {
	font-size: 90%;
	text-transform: uppercase;
	color: #FFF;
	background: #cc4848;
	text-align: center;
	margin: 10px;
	padding: 15px;
	min-width: 100px;
    display: inline-block;
}
.btnDiv02:hover {
	background: #b23232;
	cursor: pointer;
}

.btnSelaa {
    display: inline-block;
    padding: 10px 0;
    margin: 10px;
    width: 110px;
    text-align: center;
    background: #4ba5cf;
    color: #fff;
    cursor: pointer;
}
.btnSelaa:hover {
    background: #1e79a4;    
}
.btnSelaa a {
    color: #fff;
}
.btnSelaaOff {
    display: inline-block;
    padding: 10px 0;
    margin: 10px;
    width: 110px;
    text-align: center;
    background: #d8d8d8;
    color: #fff;
}

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('../loader.svg') 50% 50% no-repeat;
}
.error {
	color: #FFF;
	background: #d14242;
	text-align: center;
	margin: 10px auto;
	padding: 20px;
	width: 80%;
}
.infoDiv {
	background: #8bc8e4;
	text-align: center;
	padding: 15px;
	margin-bottom: 10px;
	border: 1px solid #77acc4;
	color: #FFF;
	 -webkit-border-radius: 10px;
  	-moz-border-radius: 10px;
  	border-radius: 10px;
}
.infoDivBtn {
	background: #8bc8e4;
	text-align: center;
	padding: 15px;
	margin-bottom: 10px;
	border: 1px solid #77acc4;
	color: #FFF;
	 -webkit-border-radius: 10px;
  	-moz-border-radius: 10px;
  	border-radius: 10px;
}
.infoDivBtn:hover {
    background: #18a9eb;    
}
.infoDivBtn:active {
    background: #7e7e7e;    
}
.mvInfo {
    margin: 20px;
    text-align: left;
    border-top: solid #d8d8d8 1px;
    padding: 20px;
}
.energyWrap {
	font-size: 70%;
	text-transform: uppercase;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.energyTxt {
	margin-bottom: 5px;
}
.energyBar {
	height: 10px;
	border: 1px solid #616161;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
}
.energyBall {
	background: #FFF;
	height: 10px;
	width: 10px;
	position: absolute;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}


.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:5px;
	color:#fff;
	font-size:90%;
}


.saaWrap {
    width: 100%;
    margin: 8px auto;
}
.pirate {
	background: url(../images/pirate.jpg) no-repeat center center;
	width: 100%;
	margin-top: 25px;
	margin-bottom: 0px;
	padding-bottom: 37.5%;
	background-size: auto 100%;
}
.piratetxt {
	margin-bottom: 25px;
	font-size: 80%;
	background: #dfdfdf;
	padding: 10px 15px;
}
.footer {
    background: #000;    
}
#kuoppatilasto {
	font-weight: bold;
	color: #f3f3f3;
	margin-top: 50px;
	text-transform: uppercase;
	background: #000;
	padding: 50px 20px;
}


 
div.stretchy-wrapper {
    width: 100%;
    padding-bottom: 16.666%; 
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(/images/weather/day_poutaa.jpg);
    background-size: cover;
}
 
div.stretchy-wrapper > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.91);
    font-weight: bold;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}


blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 10px 0 20px;
  position: relative;
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 90%;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  background: #f9f9f9;
  
  /*Borders - (Optional) */
  border: 1px solid #7da078; 
  
  /*Box Shadow - (Optional)
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc; */
}

blockquote::before {
  content: "i"; /*Unicode for Left Double Quote*/
  
  background: #7da078;/*url of image*/
  height: 40px;/*height of image*/
  width: 40px;/*width of image*/
  
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 180%;
  font-weight: bold;
  color: #fff;
  line-height: 40px; text-align: center;
  
  /*Positioning*/
  position: absolute;
  left: -10px;
  top: -10px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}



.gradient1 {
background: #fc0000; /* Old browsers */
background: -moz-linear-gradient(left,  #fc0000 0%, #009b00 75%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #fc0000 0%,#009b00 75%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #fc0000 0%,#009b00 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc0000', endColorstr='#009b00',GradientType=1 ); /* IE6-9 */


}