@font-face {
  font-family: 'icomoon';
  src: url("../../fonts/icomoon/icomoon.eot");
  src: url("../../fonts/icomoon/icomoon.eot") format("embedded-opentype"), url("../../fonts/icomoon/icomoon.ttf") format("truetype"), url("../../fonts/icomoon/icomoon.woff") format("woff"), url("../..fonts/icomoon/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal;}

body{max-width: 100vw; height: auto; position: relative; overflow-x: hidden;
	 font-family: Calibri, Verdana, Geneva, Arial, sans-serif;
	 margin: 0px auto;}

 /* kuvat ja kertomus isoille näytöille */
.c4, #c4 {margin: -20px auto auto auto;
padding: 0px !important;
font-size: 1.1em; color: #000603; }

#logo {text-align:center; margin: 0px auto; max-width: 100%; height: auto; border-radius: 0.5em; }
#sma  { font-weight: normal !important; font-size: 1em;}  /* h2 symbolit */

h1 {text-align: center; font-size: 1.8em; color: #fd0000;}

h2 {text-align: center; font-size: 1.2em; margin: 10px auto 4px auto;}

.icon-mouse-pointer {font-size: 1em; padding: 2px;}

h3 {font-size: 1.25em; color: #0082ff; text-align: center; padding: 4px; background-color: #fff; border: 0; -moz-border-radius: .4em;
border-radius: .4em;}

.h3 { border: 0px; -moz-border-radius: 0.7em; border-radius: 0.7em; }

.h3, .h3 a, .h3 a:link, .h3 a:active {margin: -6px auto auto -6px; padding: 8px; height: auto; text-align: left; line-height: 115%; font-size: 1.2em; text-decoration:none;}

h4 {font-size: 0.9em; color: #0082ff; text-align: center; max-width: 98%; }
p.h4, .h4 {font-size: 1em; text-align: center; margin: 0px auto; padding: 5px; font-weight: bold; }

h5 {font-size: 0.9em; text-align: center; max-width: 98%; }

.img, img {text-align:center; margin: 0px auto; max-width: 100%; height: auto; border-radius: .6em;}

p::first-letter {text-transform: uppercase; font-size: 1.3em;}

p.alkutxt{max-width: 1000px; height: auto; position: relative; font-size: 1.15em;
line-height: 120%;
background-color: #ececec;
border: dotted 1px #cacaca;
margin: 10px auto 20px auto;
padding: 8px;
-moz-border-radius: .5em;
border-radius: .5em;}

p.txt {text-align: center; font-size: 1.15em; color: #000603;
background-color: #fbfbfb;
margin: -8px 3px 30px 3px;
padding: 8px;
border: 0;
-moz-border-radius: .5em;
border-radius: .5em;
clear: both;}

#txt{text-align: center;
font-size: 1em;
line-height: 120%;
background-color: #fff;
max-width: 98vw; height: auto;
margin: -4px 0px 30px 0px;
padding: 8px;
border: 0;
-moz-border-radius: .5em;
border-radius: .5em;}

span.d {font-size: 1.3em;}

#src { border: 0px; -moz-border-radius: 0.7em; border-radius: 0.7em;}
#cen, .cen {margin: 0px auto; text-align: center;}
.kes {text-align: center; margin: -15px auto 10px auto; font-size: 1em; font-style: italic;}
.ylo {text-align: center; margin: -55px auto 10px auto; font-size: 1em; font-style: italic;}

p.alkutxt, p.txt, .txt, #txt, #text, img, h2, h3, .h3, .kes { /*linkit, tilastot, tekstit, otsikot */
-webkit-box-shadow: 7px 14px 32px 3px rgba(163, 174, 184, 0.4);
-moz-box-shadow: 7px 14px 32px 3px rgba(163, 174, 184, 0.4);
-ms-box-shadow: 7px 14px 32px 3px rgba(163, 174, 184, 0.4);
-o-box-shadow: 7px 14px 32px 3px rgba(163, 174, 184, 0.4);
box-shadow: 7px 14px 32px 3px rgba(163, 174, 184, 0.4);
flex-grow: 1;
background-size: cover;}

a {color: #0000ff; text-decoration:none;}
a:hover { color:#ff0000; text-decoration:none;}
a:visited {color:#900090; text-decoration:none;}

.scrollToTop{
   position: fixed;
	width:60px;
	height:60px;
	background: whiteSmoke;
	color: #444;
	bottom:70px;
	right:0px;
	display:none;
	background: url('img/up.png') no-repeat 0px 0px;}

video { max-width: 100%; height: auto; border: none; -moz-border-radius: .7em; border-radius: .7em; clear: both;}

iframe {max-width: 100%; height: 780px; border: 1px; border-color: #fff; border-style: dotted; -moz-border-radius: 1em; border-radius: 1em; clear: both;}

#k2 {/* EI tällä sivulla */ 
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
  font-family: 'Courier New', Courier; color: black;
  font-size: 1em; margin-top: -50px; margin-left: 50px;}

.bred {color: #FF0000; font-size: 1.3em; font-weight: bold;}

#kuv{width: 91%;
	background-color: #fff;
	margin: 0px auto;
	padding-left: 20px;
	padding-right: 20px;
	border: 1px;
	border-color: #00ced1;
	border-style: dotted;
	-moz-border-radius: 2em; border-radius: 2em;
}

#s {border: 1px;
	border-color: #00ced1;
	border-style: dotted;
	background-color: #D2D2D2;}

#stat {
   color: #5E5E5E;
   font-size: 0.9em;
	margin: 4px 0px 0px 22px}
	
.stat {text-decoration: none;
   font-size: 16px;
	margin: auto auto auto 32px}

#sentti {margin-top: 2px; margin-bottom: 2px; margin-left: 35px;}

#blu { background-color: #add8e6; max-width: 99%; height: auto;}
.blub {background-color: #00ffff; max-width: 99%; height: auto;}

.r { color:#ff0000; font-size: 1.06em; margin: auto 5px auto 25px;}
#r {background-color: #ff0000;}
.pad {height: 20px; padding-left: 30px;}

#rc { color:#ff0000;	text-align: center;	margin-top: 0px;	margin-bottom: -5px;	}
	
.g { font-size: 1em;	color: #008000;}

.d { font-size: 1em;	color: #000; text-align: center;	}

.blu { font-size: 1.1em; color:#0000ff;}
.blue { font-size: 1em; color:#0000ff;}

.c { font-size: 1.4em; font-weight: bold;	color: #000; text-align: center;	}

.end { /* loppu */	margin-left: 0cm;	color: #008000; font-size: 1.2em;}

.ybg {background-color: #f5f5f5;}

.nou {text-decoration: none;}

pre, #pre{white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
font-size: 1em; color:#000000;
margin: 1% 10% 1% -20%; padding: 10px;
-moz-border-radius: .4em; border-radius: .4em;
width: auto;}

.pre {white-space: pre-wrap; /*text-align: justify;*/
  word-wrap: break-word;
font-size: 1em; margin: 0% 1% 0% 1%; padding: 2px;
width: auto;}

#blues {max-width: 1000px; height: auto; position: relative; margin: 0px auto !important; text-align: center;  /* link_nish.inc */
font-size: 1em;
padding: 10px;
background-color: #d6d6d6;
border: dotted 1px #878787;
-moz-border-radius: .5em;
border-radius: .5em;}

.cent, #cent { text-align: center; margin: 0px auto;	}


					/* PIENET ÄLYTTÖMÄT KÄNNYT, TABLETIT.  KUVAT JA KERTOMUS, KESKELLÄ */

@media only screen and (max-width: 959px) {
body {max-width: 100vw; height: auto; position: relative; overflow-x: hidden; background-color: #000; color: #fff;}

 /* kuvat ja kertomus */
.c4, #c4 { background-color: #000; color: #fff; margin: -26px 0px auto 0px; padding: 2px 0px !important; font-size: .9em; }

h1 {text-align: center; font-size: 1.7em; color: #fff;}
h2 {text-align: center; font-size: 1.2em; margin: 10px auto 6px auto;}

img, .img{ /* KUVAT PIENEMMILLÄ NÄYTÖILLÄ */
margin: 0px auto !important;
padding: 0px 0px auto 0px !important;
background-color:#000;
border-radius: .7em;
-moz-border-radius: .7em; }

h2, h3, img, .img, .h3, p, #text, p.alkutxt, p.txt, .txt, #txt {
 												/* PIENEMMILLÄ NÄYTÖILLÄ EI VARJOA teksteissä */
-box-shadow:  none;
-webkit-box-shadow: none;
-moz-box-shadow:  none;
-ms-box-shadow:  none;
background-color:#000;
color: #fff;
padding: auto 4px auto auto;
-moz-border-radius: .5em;
border-radius: .5em;}

p.alkutxt, p.txt {margin: -10px 2px 20px 2px; border: none }

.c4 h5 b, .c4 .h5, #c4 h5 b, #c4 .h5 {background-color: #000; color: #fff; font-size: 1.1em;}

.scrollToTop { width:30px; /*PIENEMPI NUOLI*/
	height:30px;
	background: whiteSmoke;
	font-weight: normal;
	color: #444;
	position:fixed;
	bottom:70px;
	right:12px;
	display:none;
	background: url('img/up_sm.png') no-repeat 0px 0px;}

a {color: #ffff00; text-decoration:none;}
a:hover { color: #00ffff; text-decoration:none; }
a:visited {color:#ffdfff; text-decoration:none;}
	
.c4 #pre, .c4 pre{ white-space: pre-wrap; word-wrap: break-word; text-align: justify; font-size: 1.3em; color:#fff; margin: 1% .2% 1% 0%; padding: 5px;
-moz-border-radius: .4em; border-radius: .4em;}

iframe {width: 100%; height: 360px; border: 1px; border-color: #fff; border-style: dotted; -moz-border-radius: 1em; border-radius: 1em; clear: both; }/*Pienempi iframe*/

#blues { /* link_nish.inc */
margin: 0px auto; text-align: center;
font-size: 1em;
padding: 9px;
background-color: #808080;
border: dotted 1px #fff ;
-moz-border-radius: .5em;
border-radius: .5em;}
} 													/* PIENET NÄYTÖT LOPPUIVAT */


.rotate:hover {
     -webkit-animation: rotate 3s linear infinite;
}

@-moz-keyframes rotate {
    from{-webkit-transform: rotate(0deg); }
    to  {-webkit-transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
    from{-webkit-transform: rotate(0deg); }
    to  {-webkit-transform: rotate(360deg); }
}

.social {
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  width: 100%;
  outline: none;
  text-decoration: none;
}

.social li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.social li a {
  font-size: 33px;
  display: table;
  width: 45px;
  height: 45px;
  margin: 0px;
  outline: none;
  text-decoration: none;
}

.social li a i {margin: auto; /*Ikonin Keskitys */
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.social li a:hover, .social li a:active, .social li a:focus {
  text-decoration: none;
  border-bottom: none;
}

.social li a.social-box {
  background: #0000ff;
  color: #fff;
}

.social li a.social-circle {
  background: #0000ff;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.social li a:hover {
  background: #393e46 !important;
}

.social.social-box a {
  background: #0000ff;
  color: #fff;
  filter:drop-shadow(6px 6px 8px gray);
}

.social.social-circle a {
  background: #0000ff;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  filter:drop-shadow(6px 6px 8px gray);
}

/* Large devices (laptops/desktops, 959px and up) */

/* Extra small devices (phones, 600px and down)
@media only screen and (max-width: 600px) {
  body {background: red;}
}*/

/* Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px) {
  body {background: green;}
}*/

/* Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px) {
  body {background: blue;}
}*/
/* Extra large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1200px) {
  body {background: pink;}
} */
 /*Pienet näytöt loppuivat*/