/*version 1.0, 11.02.2016*/
/*version 1.1, 11.02.2016*/
img{
    display: block;
}

/*#k4{
    width: 100%;
    height: 100%;
    display: block;
    background-image: url("Kuvat/tarjoilu2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

#viimeinen{
    width: 100%;
    height: 10%;
    display: block;
    position: relative;
    float:right;
    bottom: 0;
}*/

/* Portrait and Landscape // lahde: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
      #oikealaita{
        display: block;
        position: relative;
        padding-right: 1%;
      }
      #sisalto{
          width: 55%;
          left: 5%;
          margin: 0;
      }
      h1{
          font-size: 3em;
      }
      h2{
        font-size: 2em;
      }
      td h2{
          font-size: 2em;
      }
      h3{
          font-size: 2em;
          font-weight: bold;
      }
      p{
          font-size: 2em;
      }
      td{
          font-size: 2em;
      }
      .oikeanlaidankuva{
        width: 25%;
        height: 10%;
        padding-right: 1%;
        padding-left: 1%;
        border: 0;
      }
}
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
      #oikealaita{

        width: 25%;
        height: 30%;
        display: block;
        /*float: right;
        right: 3%;*/
        padding-top: 10%;
        right: 45%;
        bottom: -30;
      }
      #sisalto{
          width: 65%;
          left: 5%;
          margin: auto;
      }
      h1{
          font-size: 4em;
      }
      h2{
        font-size: 2em;
      }
      td h2{
          font-size: 2em;
      }
      h3{
          font-size: 3em;
      }
      p{
          font-size: 2em;
      }
      td{
          font-size: 2em;
      }
      .oikeanlaidankuva{
        width: 50%;
        height: 100%;
        padding-right: 1%;
        border: 0;
      }
}

/*Galaxy S5  // lahde: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/*/
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (orientation: portrait)
  and (-webkit-device-pixel-ratio: 3) {
      #oikealaita{
        display: block;
        position: relative;
        padding-right: 1%;
      }
      #sisalto{
          width: 55%;
          left: 5%;
          margin: 0;
      }
      h1{
          font-size: 3em;
      }
      h2{
        font-size: 2em;
      }
      td h2{
          font-size: 2em;
      }
      h3{
          font-size: 2em;
          font-weight: bold;
      }
      p{
          font-size: 2em;
      }
      td{
          font-size: 2em;
      }
      .oikeanlaidankuva{
        width: 25%;
        height: 10%;
        padding-right: 1%;
        padding-left: 1%;
        border: 0;
      }
  }

@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (orientation: landscape)
  and (-webkit-device-pixel-ratio: 3) {
      #oikealaita{

        width: 25%;
        height: 30%;
        display: block;
        /*float: right;
        right: 3%;*/
        padding-top: 10%;
        right: 45%;
        bottom: -30;
      }
      #sisalto{
          width: 65%;
          left: 5%;
          margin: auto;
      }
      h1{
          font-size: 4em;
      }
      h2{
        font-size: 2em;
      }
      td h2{
          font-size: 2em;
      }
      h3{
          font-size: 3em;
      }
      p{
          font-size: 2em;
      }
      td{
          font-size: 2em;
      }
      .oikeanlaidankuva{
        width: 50%;
        height: 100%;
        padding-right: 1%;
        border: 0;
      }
}

p{
    display: block;
}

h3{
    display: block;
    font-size: 150%;
    font-style: italic;
    font-weight: bold;
    color: #00FFFF;
}

h2{
    display: block;
}

h1{
    padding-left: 34%;
    display: block;
    font-size: 250%;
    font-style: italic;
    font-weight: bold;
}

#header{
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
    background: red; /* For browsers that do not support gradients */
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left,#CE1126,#FFFFFF,#006847);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(left,#CE1126,#FFFFFF,#006847);
    /* For Fx 3.6 to 15 */
    background: -moz-linear-gradient(left,#CE1126,#FFFFFF,#006847);
    /* Standard syntax */
    background: linear-gradient(to right,#CE1126,#FFFFFF,#006847);
}



#sisalto{
    display: inline-block;
    width: 45%;
    height: 100%;
    position: relative;
    left: 14%;
    margin: auto;
}

#navigointi{
    width: 20%;
    display: block;
    position: relative;
    float:left;
    clear: both;
}

#oikealaita{
    padding-top: 5%;
    width: 25%;
    height: 30%;
    position: absolute;
    float: right;
    right: 3%;
}

#kuva2{
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url("Kuvat/muut.jpg") 10% 20%;
    background-repeat: no-repeat;
    background-size:cover;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}

#kuva3{
    display: block;
    width: 100%;
    height: 100%;
    background: url("Kuvat/valmistus.jpg") 10% 20%;
    background-repeat: no-repeat;
    background-size:cover;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}

body{
    font-family: "Times New Roman", Times, serif;
    font-size: 1em;
    width: 75%;
}
footer{
    display: block;
    font-family: "Times New Roman", Times, serif;
    font-size: 10px;
    position: relative;
    bottom: 0;
    margin: 0;
    padding: 0;
}