@charset "UTF-8";

html {
    height: 80%;
    width: 80%;
}
body {
    min-height: 80%;
    width: 80%;
}

h3 {
  display:block;
  font-size: 3em;
  margin-bottom: 0.67em;
  margin-right: 0;
  font-weight:500;
  color: white;

}

a  { color:#FFFFFF; text-decoration: none;}

iframe:focus {
  outline: none;
}

	   	#page3 { width: 100%; text-align: center; margin: -20%; margin-left: 200px; padding: 50px; color:white}
		#page5 { text-align: right; margin-right: -200px; padding: 50px;}
       	#page-kuva2 { position: relative; width: 60%; margin: 0 auto; padding: 0; background: transparent; border-radius: 10px;}
        #page-kuva22 { position: relative; width: 60%; margin-left: 20%; padding: 20px; background: transparent; border-radius: 10px; color: white;}
        p.padding { padding-left: 5cm; padding-right: 2cm;}
        p { padding-left: 3cm; padding-right: 2cm; color: white;}
        
iframe[seamless] {
  display: block;
}

ul.dropdown {
 font-weight: normal;
}

	ul.dropdown li {
	 padding: 7px 10px;
	 border-color: #fff #d9d9d9 #d9d9d9;
	 background-color: #000;
	 color: #000;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover,
	ul.dropdown li.on {
	 background-color: #000;
	 color: #fff;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #fff; text-decoration: none; }
	ul.dropdown a:hover		{ color: #fff; }
	ul.dropdown a:active	{ color: #fff; }
   	p.padding { padding-left: 2cm; padding-right: 2cm; font-style:italic;}
	

	/* -- 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/default/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.9;
    
	padding:20px;
	position: right;
	width:70%; 
	margin-left:auto;
    margin-top: 40%;

}

/* -- fontti -- */

@font-face {
	font-family: Roboto;
	src: url(../fonts/Roboto-Light.ttf);

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

.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);
    }
}