@font-face {
	  font-family: 'outokone_menu';
	  src:
	    url('fontit/outokone_menu.ttf?tisy3f') format('truetype'),
	    url('fontit/outokone_menu.woff?tisy3f') format('woff'),
	    url('fontit/outokone_menu.svg?tisy3f#outokone_menu') format('svg');
	  font-weight: normal;
	  font-style: normal;
	}
	
	@font-face {
	  font-family: 'outokone';
	  src:
	    url('fontit/outokone.ttf?tisy3f') format('truetype'),
	    url('fontit/outokone.woff?tisy3f') format('woff'),
	    url('fontit/outokone.svg?tisy3f#outokone') format('svg');
	  font-weight: normal;
	  font-style: normal;
	}
	body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.mobile_extra { display: none;}

.flex { display: flex; }
.flex_child {}

.flex_row { flex-direction: row; }
.flex_row-reserve { flex-direction: row-reverse; }
.flex_column { flex-direction: column; }
.flex_column-reserve { flex-direction: column-reverse; }
.flex-wrap { flex-wrap : wrap; }
.flex-wrap-reserve { flex-wrap :wrap-reserve; }

.table { display: table; box-sizing: border-box; }
.tablerow {display: table-row; box-sizing: border-box; }
.tablecell {display: table-cell; vertical-align:top; box-sizing: border-box; }

.inlineblock { display: inline-block; }
.block { display: lock; }

.relative { position: relative; } 
.center { text-align: center; }

.aligncenter { margin-left:auto; margin-right: auto; }

.left { text-align: left; }
.right { text-align: right; }

.middle { vertical-align: middle; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }

.clear { clear:both;}

.block { display: block; }

.height10vh {height: 10vh;}
.height20vh {height: 20vh;}
.height30vh {height: 30vh;}
.height40vh {height: 40vh;}
.height50vh {height: 50vh;}
.height60vh {height: 60vh;}
.height70vh {height: 70vh;}
.height80vh {height: 80vh;}
.height90vh {height: 90vh;}
.height100vh {height: 100vh;}

.height5vh  {height: 5vh;}
.height15vh {height: 15vh;}
.height25vh {height: 25vh;}
.height35vh {height: 35vh;}
.height45vh {height: 45vh;}
.height55vh {height: 55vh;}
.height65vh {height: 65vh;}
.height75vh {height: 75vh;}
.height85vh {height: 85vh;}
.height95vh {height: 95vh;}


.width100 {width: 100%;}
.width99 {width: 99%;}
.width98 {width: 98%;}
.width97 {width: 97%;}
.width96 {width: 96%;}
.width95 {width: 95%;}

.width90 {width: 90%;}
.width85 {width: 85%;}
.width80 {width: 80%;}
.width75 {width: 75%;}
.width70 {width: 70%;}

.width66 {width: 66%;}
.width65 {width: 65%;}

.width60 {width: 60%;}

.width55 {width: 55%;}

.width50 {width: 50%;}
.width49 {width: 49%;}
.width48 {width: 48%;}
.width47 {width: 47%;}
.width46 {width: 46%;}
.width45 {width: 45%;}
.width40 {width: 40%;}

.width35 {width: 35%;}
.width34 {width: 34%;}
.width33 {width: 33%;}
.width33 {width: 33%;}
.width32 {width: 32%;}
.width31 {width: 31%;}
.width30 {width: 30%;}

.width25 {width: 25%;}

.width20 {width: 20%;}

.width15 {width: 15%;}

.width10 {width: 10%;}
.width9 {width: 9%;}
.width8 {width: 8%;}
.width7 {width: 7%;}
.width6 {width: 6%;}
.width5 {width: 5%;}
.width4 {width: 4%;}
.width3 {width: 3%;}
.width2 {width: 2%;}
.width1 {width: 1%;}


.paddingleft10 { padding-left: 10%; }
.paddingleft5 { padding-left: 5%; }
.paddingleft4 { padding-left: 4%; }
.paddingleft3 { padding-left: 3%; }
.paddingleft2.5 { padding-left: 2.5%; }
.paddingleft2 { padding-left: 2%; }
.paddingleft1.5 { padding-left: 1.5%; }
.paddingleft1 { padding-left: 1%; }
.paddingleft0.5 { padding-left: 0.5%; }

.paddingright10 { padding-right: 10%; }
.paddingright5 { padding-right: 5%; }
.paddingright4 { padding-right: 4%; }
.paddingright3 { padding-right: 3%; }
.paddingright2 { padding-right: 2%; }
.paddingright1.5 { padding-right: 1.5%; }
.paddingright1 { padding-right: 1%; }
.paddingright0.5 { padding-right: 0.5%; }

.paddingtop10 { padding-top: 10%; }
.paddingtop9 { padding-top: 9%; }
.paddingtop8 { padding-top: 8%; }
.paddingtop7 { padding-top: 7%; }
.paddingtop6 { padding-top: 6%; }
.paddingtop5 { padding-top: 5%; }
.paddingtop4 { padding-top: 4%; }
.paddingtop3 { padding-top: 3%; }
.paddingtop2 { padding-top: 2%; }
.paddingtop1.5 { padding-top: 1.5%; }
.paddingtop1 { padding-top: 1%; }
.paddingtop0.5 { padding-top: 0.5%; }

.paddingbottom5 { padding-bottom: 5%; }
.paddingbottom4 { padding-bottom: 4%; }
.paddingbottom3 { padding-bottom: 3%; }
.paddingbottom2 { padding-bottom: 2%; }
.paddingbottom1.5 { padding-bottom: 1.5%; }
.paddingbottom1 { padding-bottom: 1%; }
.paddingbottom0.5 { padding-bottom: 0.5%; }

.padding0.5 { padding: 0.5%;}
.padding1 { padding: 1%;}
.padding1.5 { padding: 1.5%;}
.padding2 { padding: 2%;}
.padding2.5 { padding: 2.5%;}
.padding3 { padding: 3%;}
.padding4 { padding: 4%;}
.padding5 { padding: 5%;}
.padding6 { padding: 6%;}
.padding7 { padding: 7%;}
.padding8 { padding: 8%;}
.padding9 { padding: 9%;}
.padding10 { padding: 10%;}

.margintop0.5 { margin-top: 0.5%; }
.margintop1  { margin-top: 1%; }
.margintop1.5  { margin-top: 1.5%; }
.margintop2  { margin-top: 2%; }
.margintop3  { margin-top: 3%; }
.margintop4  { margin-top: 4%; }
.margintop5  { margin-top: 5%; }
.margintop6  { margin-top: 6%; }
.margintop7  { margin-top: 7%; }
.margintop8  { margin-top: 8%; }
.margintop9  { margin-top: 9%; }
.margintop10  { margin-top: 10%; }

.marginleft0.5 { margin-left: 0.5%; }
.marginleft1  { margin-left: 1%; }
.marginleft1.5  { margin-left: 1.5%; }
.marginleft2  { margin-left: 2%; }
.marginleft3  { margin-left: 3%; }
.marginleft4  { margin-left: 4%; }
.marginleft5  { margin-left: 5%; }
.marginleft6  { margin-left: 6%; }
.marginleft7  { margin-left: 7%; }
.marginleft8  { margin-left: 8%; }
.marginleft9  { margin-left: 9%; }
.marginleft10  { margin-left: 10%; }

.marginright0.5 { margin-right: 0.5%; }
.marginright1  { margin-right: 1%; }
.marginright1.5  { margin-right: 1.5%; }
.marginright2  { margin-right: 2%; }
.marginright3  { margin-right: 3%; }
.marginright4  { margin-right: 4%; }
.marginright5  { margin-right: 5%; }
.marginright6  { margin-right: 6%; }
.marginright7  { margin-right: 7%; }
.marginright8  { margin-right: 8%; }
.marginright9  { margin-right: 9%; }
.marginright10  { margin-right: 10%; }

.marginbottom0.5 { margin-bottom: 0.5%; }
.marginbottom1  { margin-bottom: 1%; }
.marginbottom1.5  { margin-bottom: 1.5%; }
.marginbottom2  { margin-bottom: 2%; }
.marginbottom3  { margin-bottom: 3%; }
.marginbottom4  { margin-bottom: 4%; }
.marginbottom5  { margin-bottom: 5%; }
.marginbottom6  { margin-bottom: 6%; }
.marginbottom7  { margin-bottom: 7%; }
.marginbottom8  { margin-bottom: 8%; }
.marginbottom9  { margin-bottom: 9%; }
.marginbottom10  { margin-bottom: 10%; }

.margin0.5 { margin: 0.5%; }
.margin1 { margin: 1%; }
.margin1.5 { margin: 1.5%; }
.margin2 { margin: 2%; }
.margin3 { margin: 3%; }
.margin4 { margin: 4%; }
.margin5 { margin: 5%; }
.margin6 { margin: 6%; }
.margin7 { margin: 7%; }
.margin8 { margin: 8%; }
.margin9 { margin: 9%; }
.margin10 { margin: 10%; }

.font90 { font-size: 90%; }
.font80 { font-size: 80%; }
.font70 { font-size: 70%; }

.cover {
	background-size: cover;
}

.borderbox {
	box-sizing: border-box;
}


@media only screen and (max-width: 767px) {
    /* phones */

.table { display: block; }
.tablerow {display: block; }
.tablecell {display: block; }

.width100 {width: 100%;}
.width99 {width: 100%;}
.width98 {width: 100%;}
.width97 {width: 100%;}
.width96 {width: 100%;}
.width95 {width: 100%;}

.width90 {width: 100%;}
.width85 {width: 100%;}
.width80 {width: 100%;}
.width75 {width: 100%;}
.width70 {width: 100%;}

.width66 {width: 100%;}
.width65 {width: 100%;}

.width60 {width: 100%;}

.width55 {width: 100%;}

.width50 {width: 100%;}
.width49 {width: 100%;}
.width48 {width: 100%;}
.width47 {width: 100%;}
.width46 {width: 100%;}
.width45 {width: 100%;}
.width40 {width: 100%;}

.width35 {width: 100%;}
.width34 {width: 100%;}
.width33 {width: 100%;}
.width33 {width: 100%;}
.width32 {width: 100%;}
.width31 {width: 100%;}
.width30 {width: 100%;}

.width25 {width: 100%;}

.width20 {width: 100%;}

.width15 {width: 100%;}

.width10 {width: 10%;}
.width9 {width: 9%;}
.width8 {width: 8%;}
.width7 {width: 7%;}
.width6 {width: 6%;}
.width5 {width: 5%;}
.width4 {width: 4%;}
.width3 {width: 3%;}
.width2 {width: 2%;}
.width1 {width: 1%;}

.table.tablemobile { display: table; box-sizing: border-box; }
.tablemobile > .tablerow {display: table-row; box-sizing: border-box; }
.tablemobile > .tablecell {display: table-cell; box-sizing: border-box; }
.tablemobile > .tablerow > .tablecell {display: table-cell; box-sizing: border-box; }

.table.tablemobile .notablemobile { display: block; }
.tablemobile .tablerow .notablemobile {display: block; }
.tablemobile .tablecell .notablemobile {display: block; }

.tablemobile .width100 {width: 100%;}
.tablemobile .width99 {width: 99%;}
.tablemobile .width98 {width: 98%;}
.tablemobile .width97 {width: 97%;}
.tablemobile .width96 {width: 96%;}
.tablemobile .width95 {width: 95%;}

.tablemobile .width90 {width: 90%;}
.tablemobile .width85 {width: 85%;}
.tablemobile .width80 {width: 80%;}
.tablemobile .width75 {width: 75%;}
.tablemobile .width70 {width: 70%;}

.tablemobile .width66 {width: 66%;}
.tablemobile .width65 {width: 65%;}

.tablemobile .width60 {width: 60%;}

.tablemobile .width55 {width: 55%;}

.tablemobile .width50 {width: 50%;}
.tablemobile .width49 {width: 49%;}
.tablemobile .width48 {width: 48%;}
.tablemobile .width47 {width: 47%;}
.tablemobile .width46 {width: 46%;}
.tablemobile .width45 {width: 45%;}
.tablemobile .width40 {width: 40%;}

.tablemobile .width35 {width: 35%;}
.tablemobile .width34 {width: 34%;}
.tablemobile .width33 {width: 33%;}
.tablemobile .width33 {width: 33%;}
.tablemobile .width32 {width: 32%;}
.tablemobile .width31 {width: 31%;}
.tablemobile .width30 {width: 30%;}

.tablemobile .width25 {width: 25%;}

.tablemobile .width20 {width: 20%;}

.tablemobile .width15 {width: 15%;}

.tablemobile .width10 {width: 10%;}
.tablemobile .width9 {width: 9%;}
.tablemobile .width8 {width: 8%;}
.tablemobile .width7 {width: 7%;}
.tablemobile .width6 {width: 6%;}
.tablemobile .width5 {width: 5%;}
.tablemobile .width4 {width: 4%;}
.tablemobile .width3 {width: 3%;}
.tablemobile .width2 {width: 2%;}
.tablemobile .width1 {width: 1%;}


 } 	

/* *fontit */

/**
 * @license
 * MyFonts Webfont Build ID 3166126, 2016-02-04T08:26:35-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: UniformRnd-Medium by Miller Type Foundry
 * URL: http://www.myfonts.com/fonts/millertype/uniform-rounded/medium/
 * 
 * Webfont: UniformRnd-Regular by Miller Type Foundry
 * URL: http://www.myfonts.com/fonts/millertype/uniform-rounded/regular/
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3166126
 * Licensed pageviews: 10,000
 * Webfonts copyright: Copyright (c) 2015 by Richard Miller. All rights reserved.
 * 
 * © 2016 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/304fae");

  
@font-face {font-family: "UniformRnd-Medium";src: url("../tiedostot/304FAE_0_0.eot");src: url("../tiedostot/304FAE_0_0.eot?#iefix") format("embedded-opentype"),url("../tiedostot/304FAE_0_0.woff2") format("woff2"),url("../tiedostot/304FAE_0_0.woff") format("woff"),url("../tiedostot/304FAE_0_0.ttf") format("truetype");}
 
  
@font-face {font-family: "UniformRnd-Regular";src: url("../tiedostot/304FAE_1_0.eot");src: url("../tiedostot/304FAE_1_0.eot?#iefix") format("embedded-opentype"),url("../tiedostot/304FAE_1_0.woff2") format("woff2"),url("../tiedostot/304FAE_1_0.woff") format("woff"),url("../tiedostot/304FAE_1_0.ttf") format("truetype");}
 

/* *perus */

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: white;
    font-family: "UniformRnd-Regular";
    font-size: 16px;
    color: #222222;
}

p {
    line-height: 1.4em;
}

.pagewrapper {
    display: table;
    width: 100%;
}
.pagecenter {
    display: table-cell;
    vertical-align: center;
    border-bottom: 1px solid #7FABBF;
}

.pagewidth {
    width: 80%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.pagefull {
   /* min-height: 100vh;*/
}


h1 {
    font-family: Georgia, serif;
    font-weight: normal;
    font-size: 1.3em;
}

h3 {
    font-family: "UniformRnd-Medium";
    color: #7FABBF;
    font-weight: normal;
}

.text_yla {
    font-size: 1.7em;
    color: #7FABBF;
    font-family: "UniformRnd-Medium";
}
.text_yla p {
    line-height: 1.3em;
    margin-bottom: 4%;
}

.tekstipalsta {
    padding-right: 2%;
}

.kuvapalsta {
    display: inline-block;
    width: 90%;
}

.kuva_oikea {
    margin-left: 20%;
}

article {
    vertical-align: middle;
    /*height: 100vh;*/
    padding: 5% 0 5% 0;
    width: 100vw;
}

/* etusivu */

.etusivu {
    height: 190vh;
    overflow: hidden;
    position: relative;
}

.etusivu_text {
    vertical-align: middle;
    width: auto;
    height: auto;
    padding-bottom: 10vh;
    border-bottom: 1px solid #7FABBF;
    z-index: 9999999;
    position: relative;
}

.scale_area {
    position: relative;
}

.etusivu_h1 {
    text-align: center;
    text-transform: inherit;
    font-size: 4.5em;
    font-family: inherit;
    margin: 0;
    color: #7FABBF;
    font-family: "UniformRnd-Medium";
}

.etusivu_h2 {
    text-align: center;
}


.test {
    position: fixed;
    background: black;
    font-size: 11px;
    top: 0;
    left: 0;
    z-index: 9;
    width: 200px;
    padding: 5px;
    color: white;
    display: none;
}

/* facebook */

.facebook_link {
    
}
.facebook_feed {
    display: block;
    padding: 0;
}
.facebook_message {
    position: relative;
    display: inline-block;
    width: 23.1%;
    padding: 1px;
    font-size: 0.9em;
    background: #F8EFD2;
    margin-right: 2.5%;
    vertical-align: top;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 2%;
}
.facebook_message:nth-child(4) {
    margin-right: 0;
}

.facebook_message p {
    padding: 5% 9%;
}

.facebook_image {
    border: none;
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center center;
}

.facebook_nappi {
     margin: 5% 9%;
     position: absolute;
     bottom: 1%;
     color: #222222;
     font-weight: bold;
}


/* footer */

footer {
    margin-top: 30px;
    width: 100%;
}

footer .pagewidth {
    position: relative;
}

footer .copy {
    width: 100%;
    text-align: center;
}

footer .maker {
    position: absolute;
    right: 0;
    top: 0;
}

/* header */

header {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 50px;
}

header .logo {
    height: 30px;
    padding-top: 10px;
}

.header_whitebar {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 50px;
}


/* paralax */

 #scalecontainer {
    display: block;
    width: 2000px;
    height: 2000px;
    top: 25vh;
/*  top: 20vh;  */
    position: fixed;
/*  position: absolute;   */    
    left:0;
    right:0;
    padding: 0;
    margin: 0;
    padding-left: 100px;
    margin-left:auto;
    margin-right:auto;
    opacity: 0;
    -webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
    -moz-transform-origin: 49% 10vh;
    -webkit-transform-origin: 49% 10vh;
    -ms-transform-origin: 49% 10vh;
    -o-transform-origin: 49% 10vh;
    transform-origin: 49% 10vh;
 
 }

#anim_wrapper {
    width: 2000px;
    height: 2000px;
    position: relative;
}

#anim_wrapper img {
    position: absolute;
}

#anim_layer1, #anim_layer2, #anim_layer3, #anim_layer5, #anim_layer6, #anim_layer7 {
    position: absolute;
    z-index: 2;
    width: 2000px;
    height: 2000px;
-webkit-transform-origin: 50% 15%;
   -moz-transform-origin: 50% 15%;
    -ms-transform-origin: 50% 15%;
     -o-transform-origin: 50% 15%; 
        transform-origin: 50% 15%;
        margin-left: -100px;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

#anim_layer2 {
    z-index: 3;
-webkit-transform-origin: 50% 25%;
   -moz-transform-origin: 50% 25%;
    -ms-transform-origin: 50% 25%;
     -o-transform-origin: 50% 25%; 
        transform-origin: 50% 25%;
}

#anim_layer3 {
    z-index: 1;
    height: 1000px;
-webkit-transform-origin: 50% 5%;
   -moz-transform-origin: 50% 5%;
    -ms-transform-origin: 50% 5%;
     -o-transform-origin: 50% 5%; 
        transform-origin: 50% 5%;
}

#anim_layer4 {
   position: fixed;
    width: 100%;
    top: 20vh;
    height: 80vh;    
    z-index: 14;
-webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%; 
        transform-origin: 50% 50%;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
    overflow:hidden;
}

#anim_layer6 {
    z-index: 13;
-webkit-transform-origin: 60% 0%;
   -moz-transform-origin: 60% 0%;
    -ms-transform-origin: 60% 0%;
     -o-transform-origin: 60% 0%; 
        transform-origin: 60% 0%;
}

#anim_layer7 {
    z-index: 2;
-webkit-transform-origin: 60% 28%;
   -moz-transform-origin: 60% 28%;
    -ms-transform-origin: 60% 28%;
     -o-transform-origin: 60% 28%; 
        transform-origin: 60% 28%;
}

#anim_talo {
    width: 1200px;
    top: -150px;
    left: 340px;
}


#anim_talo_clouds {
    width: 650px;
    top: 370px;
    left: 660px;
}

#anim_lippunainen {
    width: 120px;
    top: 113px;
    left: 585px;
    z-index: 10;
}

#anim_pallo {
    width: 200px;
    top: -355px;
    left: 1280px;
    z-index: 11;
}


#anim_pilviveikko {
    width: 300px;
    top: -405px;
    left: 480px;
    z-index: 11;
}

#anim_cowboy {
    position: absolute;
    top: 240px;
    left: 280px;
    z-index: 5;
    width: 280px;
}

.anim_lippumies2 {
    position: absolute;
    top: -115px;
    left: 430px;
    z-index: 2;
}


.anim_pilvi {
    position: absolute;
    top: -200px;
    left: -10px;
    z-index: 1;
    opacity: 0.3;
}

.anim_lentokone {
    position: relative;
    width: 100%;
    height: 80vh;
}

.anim_birds {
    position: absolute;
    top: -700px;
    z-index: 3;
}

.anim_music {
    position: absolute;
    top: 330px;
    left: 740px;
    z-index: 10;
    opacity: 0;
}

.anim_rahamiehet {
    position: absolute;
    width: 180px;
    top: 270px;
    left: 1050px;
    z-index: 3;
}

#anim_nainen img {
    margin-top: 400px;
}

#anim_nainen_ala {
    width: 2000px;
    top: 366px;
    z-index: 1;
}

#anim_nainen_taka {
    width: 2000px;
    top: -6px;
    z-index: 0;
}

#anim_nainen_etu {
    width: 2000px;
    top: 0px;
    z-index: 9;
}


/* tiimi */

.yhteystieto {
    display: inline-block;
    width: 23%;
    vertical-align: top;
    padding-right: 2%;
    padding-bottom: 1%;
    cursor:pointer;
}
.yhteystieto_kuva {
    width: 100%;
}

.yhteystiedot h3 {
    font-size: 1.2em;
}

.yhteystieto_rivi {
    padding: 1px;
    margin: 0;
    font-size: 0.9em;
}

.yhteystieto_kuvaus {
    display: none;
}

.yhteystieto_valittu .yhteystieto_kuva {
    opacity: 0.5;
}

.yhteystieto_auki {
    width: 100%;
    margin: 2% 0;
    font-size: 1.3em;
}

.yhteystieto_auki img {
    width: 40%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2% ;
}

.yhteystieto_auki .yhteystieto_rivit {
    display: inline-block;
    width: 50%;
    vertical-align: top;
}

.yhteystieto_auki .yhteystieto_kuvaus {
    display: block;
    margin-top: 2%;
}

/* valikko */

.mainmenu .mobilemenu {
    display: block; 
    width: 40px; 
    height: 40px; 
    position: absolute;
    z-index: 99999;
    right: 4px;
    top: 5px;
    background-image: url(../tiedostot/mobilemenu.png);
    background-size: 100%;
}

.mainmenu ul { 
    top: 0px;
    right: 0px;
    position: absolute;
    padding: 0;
    padding-top: 5px;
    margin: 0; 
    display: none; 
    background: #F8EFD2;
    max-width: 300px;
    z-index: 9999;
}

.mainmenu ul li {
    display: block;
}

.mainmenu ul li a {
    display: block;
    text-decoration: none;
    padding: 10px 20px 10px 20px;
    color: #222222;
    font-size: 1.3em;
    text-transform: uppercase;
} 

.mainmenu ul li a:hover {
    opacity: 0.5;
}

#kielet {
    padding-left: 8px;
}
#kielet a {
    display: inline-block;
    padding: 0 12px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    text-decoration: none;
    color: #7FABBF;
    font-weight: bold;
}

   
@media only screen and (min-width: 1100px) and (max-width:1300px) {

    /* laptops */


html, body {
    font-size: 14px;
}

.text_yla {
    font-size: 1.3em;
}

h1 {
    font-size: 1.2em;
}

.pagewidth {
    width: 90%;
}


.etusivu_h1 {
    font-size: 3.5em;
}













   
}
@media only screen and (min-width: 768px) and (max-width:1100px) {

    /* tablets  */


html, body {
    font-size: 14px;
}

.text_yla {
    font-size: 1.3em;
}

h1 {
    font-size: 1.2em;
}

.pagewidth {
    width: 90%;
}

.kuvapalsta { width: 100%; }
.kuvapalsta img { 
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}


.kuva_oikea {
    margin-left: 0%;
}

.table {
    display: block;
}

 #scalecontainer{
    top: 55vh;
}

.etusivu_h1 {
    font-size: 3.5em;
}

.facebook_message {
    width: 48.5%;
    margin-bottom: 2.5%;
}

.facebook_message:nth-child(2) {
    margin-right: 0;
}

.facebook_message p {
    padding: 3% 6%;
}

.facebook_nappi {
     margin: 3% 6%;
}







.yhteystieto {
    display: inline-block;
    width: 31%;
    vertical-align: top;
    padding-right: 2%;
    padding-bottom: 1%;
    cursor:pointer;
}




}

@media only screen and (max-width: 767px) {
    /* phones */



html, body {
    font-size: 13px;
}

.text_yla {
    font-size: 1.3em;
}

h1 {
    font-size: 1.3em;
}

p {
    line-height: 1.3em;
}

.pagewidth {
    width: 96%;
}
.kuvapalsta { width: 100%;}
.kuvapalsta img { 
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.kuva_oikea {
    margin-left: 0%;
}

.table, .tablecell {
    display: block;
}
.width50, .width25 {
    width: 100%;
}


.text_yla {
    font-size: 1.1em;
    color: #7FABBF;
    font-family: "UniformRnd-Medium";
}
.text_yla p {
    line-height: 1.3em;
    margin-bottom: 4%;
}


.etusivu {
    height: 60vh;
}

.etusivu_h1 {
     font-size: 2.5em;
}

 
#woman_mobile {
    background-image: url(../tiedostot/woman_small.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    margin-top: 40px;
    height: 50vh;
}

.facebook_message {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2.5%;
}

.facebook_message p {
    padding: 1% 3%;
}

.facebook_nappi {
     margin: 1% 3%;
     position: relative;
}

footer {
    margin-top: 30px;
    width: 100%;
}

footer .pagewidth {
    position: relative;
}

footer .copy {
    width: 100%;
    text-align: center;
}

footer .maker {
    text-align: center;
    position: relative;
}

header {
    position: fixed;
    width: 100%;
    height: 45px;
    background: white;
}

header .logo {
    height: 25px;
    padding-top: 10px;
}

 #scalecontainer, #anim_layer4 {
     display: none;
 }


.yhteystieto {
    display: inline-block;
    width: 96%;
    vertical-align: top;
    padding: 2%;
    cursor:pointer;
    border: 1px solid #ededed;
    margin-bottom: -1px;
}

.yhteystieto_kuva {
   display: none;
}

.yhteystieto_auki img {
    width: 30%;
    display: inline-block;
}

.yhteystieto_auki .yhteystieto_rivit {
    width: 66%;
}

.yhteystieto_valittu {
    background: #efefef;
}



.yhteystieto_auki .yhteystieto_rivi {
    display: none;
}


.yhteystieto_auki .yhteystieto_kuvaus {
    display: block;
    font-size: 0.7em;
    line-height: 1.5em;
}

.mainmenu .mobilemenu { 
    right: 0px;
    top: 0px;
}

.mainmenu ul {
    width: 100%;
}

.mainmenu ul li a {
    padding: 10px;
} 


	    
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}@media only screen and (min-width: px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}