@charset "UTF-8";

html {
    height: 100%; 
}

h2 {
  display:block;
  font-size: 8em;
  margin-top: -3em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight:500;

}
h22 {
  display:block;
  font-size: 8em;
  margin-top: 6em;
  margin-bottom: 0.67em;
  margin-left: 1em;
  margin-right: 0;
  font-weight:500;

}
h222 {
  display:block;
  font-size: 3em;
  margin-top: 6em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight:400;
  color: white;
}

h223 {
  display:block;
  font-size: 2em;
  margin-top: 0;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight:400;
  color: white;
}

h23 {
  display:block;
  color: black;
  font-size: 1em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight:500;

}

h3 {
  display:block;
  font-size: 1.5em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight:500;
  color: black;

}

           #page-perus { position: relative; width: 100%; margin: 20px auto; padding: 60px; color: black;}
           #page-perus2 { position: relative; width: 70%; margin: 20px auto; padding: 40px; background: #717171; opacity:0.90;  border-radius: 5px; color: white;}
           #page5 { text-align: right; margin-right: -200px;}
           #page6 { text-align: left; background: black;}
           #page11 { position: relative; width: 60%; margin-left: 20%; color: white; background: black; padding: 40px;}
           #page12 { position: relative; width: 40%; margin-left: 20%; color: white; background: transparent; padding: 20px;}
           #page-kuva2 { position: relative; width: 60%; margin-left: 10%; padding: 10px; background: transparent; border-radius: 10px; color: black;}
           #page-kuva22 { position: relative; width: 60%; margin-left: 20%; padding: 20px; background: transparent; border-radius: 10px; color: white;}

           p.padding { padding-left: 6cm; padding-right: 2cm; color: black;}
           p { padding-left: 3cm; padding-right: 2cm; color: black;}

ul.dropdown {
 font-weight: bold;
}

	ul.dropdown li {
	 padding: 7px 10px;
	 border-style: none;
	 background-color: transparent;
	 color: silver;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover,
	ul.dropdown li.on {
	 background-color: transparent;
	 color: silver;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: silver; text-decoration: none; }
	ul.dropdown a:hover		{ color: #fff; }
	ul.dropdown a:active	{ color: silver }

	/* -- level mark -- */

	ul.dropdown ul {
	 width: 150px;
	 margin-top: 1px;
	}

		ul.dropdown ul li {
		 font-weight: normal;
		}


/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}



/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(../images/default/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
 background-image: url(../images/default/nav-arrow-top.png);
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(../images/default/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir,
ul.dropdown-horizontal > li.dropdown-vertical-rtl ul *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(../images/default/nav-arrow-left.png);
 background-position: 2px 50%;
}

/* -- sijoituksia -- */

div.c2 {
	color: #fff;
	background: #000803;
    opacity:0.8;
	padding:20px;
	position: right;
	width:700px; 
	margin-left:auto;
    margin-top: 20%;
	
}

/* -- fontti -- */

@font-face {
	font-family: DejaVu Sans;
	src: url(../fonts/DejaVuSans.ttf);

	}
    
.button {
  border: none;
  color: white;
  padding: 4px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  background-color:transparent;
}

.button1 {background-color: black;}
.button2 {background-color: #5f5f5f;} 
.button3 {background-color: #5e1f00;}

body, html {
background-attachment: fixed;
background-position: center;
background-color: black;
background-repeat: no-repeat;

 }
 
    
.arrow{
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 5px solid white;
    border-right: 5px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 3s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}