body {
    background-repeat: repeat;
    background-size: cover;
    background-color: #fbf9f5;
    padding: 0px 0 0 0;
    font-family: Verdana, Arial, sans-serif;
    margin: 0;
    color: #000000;
    font-size:1.1vw
}


.topnav {
  overflow: hidden;
  background: white; color: black; position: fixed;  margin: 0 auto 0; width:100%;
    text-align: center; font-size: 100%; a:hover pseudo; padding-top: 1%; padding-bottom: 1%; opacity:0.95; font-family: Verdana;}


.topnav a:hover {
  background-color: #white;
  color: #A9A9A9;
}

.active {
  background-color: #white;
  color: white;
  
}
.item {  
  padding-left:2%;
 
}

.topnav .icon {
  display: none;
}

#oy {color: #d53b6b; }
#tausta1 {background-color: #d53b6b; color: #fbf9f5; width: 15%; padding: 0.5%; border-radius: 0px 60px 60px 0px; margin-bottom: 30px; margin-top: 0px; padding-left: 2%}
#tausta2 {background-color: #cbcbcb; width: 15%; padding: 0.5%; border-radius: 0px 60px 60px 0px; margin-bottom: 30px; margin-top: 0px; padding-left: 2%}
#tausta3 {background-color: #fbf9f5; width: 15%; padding: 0.5%; border-radius: 0px 60px 60px 0px; margin-bottom: 30px; margin-top: 0px;padding-left: 2%}
#tausta4 {background-color: #ffedee; width: 15%; padding: 0.5%; border-radius: 0px 60px 60px 0px; margin-bottom: 30px; margin-top: 0px; padding-left: 2%}
#tausta5 {background-color: #b19a7d; width: 15%; padding: 0.5%; border-radius: 0px 60px 60px 0px; margin-bottom: 30px; margin-top: 0px; padding-left: 2%}

#aloitus {  padding-top: 2%;  }

/* #blogi1, #blogi2, #blogi3 {width:50%;} */

.column {
  float: left;
  width: 30%;
  padding-left: 0.2%;
  margin-left: 2%;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

#tutustuminen {background-color: #fbf9f5; text-align: center; color: black; padding: 10%; font-size: 150%; border: solid 5px #020202;}

#otayhteytta {background-color: #ffedee; padding-top: 2%; padding-bottom: 1%; margin-top: 50px; font-family: Verdana; }
#otayh {  text-align: center; color: black; padding: 3%; font-size: 150%}

#tarinani {background-color: #ffedee; color: black; padding-top: 2%; padding-bottom: 1%; margin-top: 50px; font-family: Verdana;}
#tarina {  padding-left: 10%; padding-right: 10%;}

#palvelut {background-color: #cbcbcb; color: black; padding-top: 2%; padding-bottom: 1%; margin-top: 50px; font-family: Verdana;}
#pal { padding-left: 10%; padding-right: 10%;}

#kokemuksia {background-color: #cbcbcb; color: black; padding-top: 2%; padding-bottom: 2%;  font-family: Verdana;}

#blogi {background-color:#dad8d8; color: black; padding-top: 2%; padding-bottom: 2%;  font-family: Verdana;}

#otsikko {   color: black; padding-left: 10%; padding-right: 10%; padding-top: 2%; padding-bottom: 1%; margin-top: 50px; font-family: Verdana;}

#container { margin-top: 50px;  background-color: white; margin-left: 0px;  }

#nimi { color: #d53b6b; font-size: 150%; font-weight: bold; line-height: 0pt;}

a { text-decoration: none;  }
a:link {  color: grey;  }
a:visited {  color: black;  }
a:hover {  color: hotpink;  }
a:active {  color: black;  }

#vasen { float: left;
   margin-right: 5%;
    margin-bottom: 3%;
    background-color: #ffedee;
  
    width: 45%;
}

#pirjo {
    width: 45%; background-color: #ffedee;

}
#vasen1 {
    float: left;
    margin-bottom: auto;
    margin-bottom: 3%;
    margin-right: 4%;
    width: 45%;
}

/* #kokemuksia {
    margin-top: -50px;
    background-color: #DCDCDC;

} */

img {
    max-width: 100%;
}
.clearfix{
    clear:both
}

.item1 { grid-area: header; background-color: #dad8d8}
.item2 { grid-area: menu; background-color:#fbf9f5;}
.item3 { grid-area: main; background-color: #ffedee}
.item4 { grid-area: right; background-color: #dad8d8;}
/* .item5 { grid-area: footer; background-color: #dad8d8;} */
.item6 { grid-area: t1; background-color: #dad8d8;}
.item7 { grid-area: t2; background-color: #fbf9f5;}
.item8 { grid-area: t3; background-color: #ffedee}
/* .item9 { grid-area: p1; background-color: #ffedee} */
.item10 { grid-area: p2; background-color: #fbf9f5}

.grid-container {
  display: grid;
  grid-template-areas: 
    'header header main main right right'
    'menu menu main main right right'
    'menu menu main main right right'
    't1 t1 t1 t2 t2 t2'
    't1 t1 t1 t2 t2 t2'
    'p2 p2 p2 t3 t3 t3'
/*    'p2 p2 p2 p2 p2 p2';
  grid-gap: 0px;
  /* background-color: #fbf9f5; */
  
}

.grid-container > div {
  /* background-color:#ffedee; */
  padding: 40px;

}

@media screen and (min-width: 0px) and (max-width: 479px) {
    body{
        font-size: smaller;
    }
    .topnav{
       padding-left: 0%;
       padding-right: 0%;
    }
    #vasen1, #pirjo, #vasen {
         width: 100%;
    }
    /* #blogi1, #blogi2, #blogi3 {width:100%; text-align: center;} */
    /* #blogilinkit {padding:1%} */
    .grid-container {
        grid-template-areas: 
        'header'
        'p2'
        'main'
        'right'
        /* 'footer' */
        'menu'
        't3'
        't1'
        't2';  
    }
    #tausta1, #tausta2, #tausta3, #tausta4, #tausta5 {width: 45%; margin-top: 20px; padding-left: 5% }
    #tarinani, #palvelut, #otsikko, #otayhteytta { padding-top: 2%; padding-bottom: 1%; margin-top: 20px;}
    #otayh, #tarina, #pal {padding-right: 5%;  padding-left: 5%;}
    #kokemuksia {
         padding-bottom: 8%; margin-top: 10px;
    }
    #container {
        margin-top: 25px; margin-bottom: 0px;
    }

    #aloitus {  padding-top: 5%;  }
    
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
    .topnav.responsive {position: fixed;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav a {
  float: left;
  display: block;
  font-size: 21px;
  color: black;
  text-align: center;
  padding: 1px 10px;
  text-decoration: none;
}
}

@media screen and (min-width: 480px) and (max-width: 890px) {
    body{
        font-size: smaller;
    }
     .topnav{
       padding-left: 0%;
       padding-right: 0%;
    }
    #vasen1, #pirjo, #vasen{
         width: 100%;
    }
    .grid-container {
        grid-template-areas: 
        'header'
        'p2'
        'main'
        'right'
        /* 'footer' */
        'menu'
        't3'
        't1'
        't2';
    }
    #tausta1, #tausta2, #tausta3, #tausta4, #tausta5 {width: 25%; margin-top: 20px; padding-left: 5%}
    #tarinani, #palvelut, #otsikko, #blogi {padding-top: 2%; padding-bottom: 1%; margin-top: 20px;
    }
    #otayh, #tarina, #pal {padding:5%}
    #kokemuksia {
      padding-bottom: 4%;
 }
    /* #container {
        margin-top: 1px;
    } */
    #aloitus {  padding-top: 4%;  }

    #esittely { width:100%;}
    
      .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;}
    .topnav.responsive {position: fixed;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav a {
  float: left;
  display: block;
  font-size: 26px;
  color: black;
  text-align: center;
  padding: 1px 16px;
  text-decoration: none;
}
}
@media screen and (min-width: 890px) and (max-width: 1290px) {
  body{
    font-size:1.2vw
  }}