@charset "UTF-8";

@font-face {
   font-family: "DejaVuSans";
   src: url(fonts/DejaVuSans.ttf) }
   
    a { color: #FFFFFF; text-decoration: none; }
   	a:link { color:#FFFFFF; text-decoration: none; }
    a:hover { color:#FFFFFF;  text-decoration: none; }
    a:visited { color:#FFFFFF; text-decoration: none; }
	p.padding { padding-left: 1cm; padding-right: 1cm; font-style:italic;}
  
h1 {
display:block;
font-size: 10vw;
top: 0.67em;
bottom: 0.67em;
font-weight:500;
text-decoration: none;
}

h2 {
display:block;
font-size: 5vw;
top: 0.67em;
bottom: 0.67em;
font-weight:500;
text-decoration: none;
}


h3 {
  display:block;
  font-size: 10vw;
top: 0.67em;
bottom: 0.67em;
font-weight:500;
    color: white;
    text-decoration: none;
}

h4 {
  display:block;
  font-size: 2.5vw;
top: 0.67em;
bottom: 0.67em;
font-weight:500;
  color:white;

}

h5 {
  display:block;
  font-size: 4vw;
top: 0.67em;
bottom: 0.67em;
font-weight:500;

}

  .otsikko3 {
  text-align: left;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;

}   
  .otsikko {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;

}

  .otsikko2 {
  text-align: left;
  position: absolute;
  top: 20%;
  left: 75%;
  transform: translate(-50%, -50%);
  color: white;

}

.verticalhorizontal {
    height: 100%;
	    text-align: center;
    width: 100%;
}

   
.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);
    }
}
		p { margin: 0 0 30px 0; color: white; font-size:1.1vw;}
		p4 { margin: 0 0 30px 0;  color: black;}	
		pp1 {Times, Serif; margin: 0 0 30px 0; color: white; font-size:1vw;}
		pp11 {margin: 0 0 30px 0; color: white; font-size:1vw;}
		pp { margin: 0 0 30px 0; color: white; font-size:1.0vw;}	
		pp3 { color: white; font-size:0.7vw;}
        pb { margin: 0 0 30px 0; color: black; font-size:1vw;}
        
	#page-perus { position: relative; width: 60%; margin: 40px; padding: 20px; background: #6E8279; opacity: 0.95; border-radius: 10px;}
   	#page-perus2 { position: relative; width: 60%; margin: 20%; padding: 20px; background: #6E8279; opacity: 0.95; border-radius: 10px;}
   	#page-lehti { position: relative; width: 70%; margin: 20px auto; padding: 20px; background: #1E0402; opacity: 0.8; border-radius: 15px;}
   	#page-lehti2 { position: relative; width: 60%; margin: 20px auto; padding: 20px; background: #6E8279; opacity: 0.9; border-radius: 15px;}
   	#page-lehti3 { position: relative; width: 60%; margin: 50px auto; padding: 60px; background: transparent;}
	#page-cv { position: relative; width: 60%; margin: 40px auto; padding: 20px; background: #fff; opacity: 0.8;border-radius: 10px; }
   	#page-cv2 { position: relative; width: 60%; margin: 20px auto; padding: 10px; background: transparent; }
	#page-lista3 { position: relative; width: 30%; background: white; border-radius: 10px;}	
	#page-kuva { position: relative; width: 60%; margin: 20px; background: transparent; }
    #page-kuva2 { position: relative; width: 60%; margin-left: 40px; background: transparent; }
    #page-kuva22 { position: relative; width:50%; margin-left: 25%; transparent; }
    #page-lista { position: relative; width: 40%; background: transparent; }
   	#page-lista2 { position: relative; width: 30%; background: grey; border-radius: 5px; align-content: center}
    #p-1 { position: relative; width: 60%; margin: 40px; padding: 20px; background: #6E8279; opacity: 0.95; border-radius: 10px;}    
        
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-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(../images/nav-arrow-right-white.png);
}

.footer {
    position: relative;
    color: white;
    width: 100%;
    min-height: 50px;
    padding: 20px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.menu__link {
    color: #fff;
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
    text-decoration: none;
    font-weight: 300;
}