html {
  height: 100%;
  width: 100%;
}

body {
	min-height: 100%;
	min-width: 100%;
  background-color: #003333;
  background-image: url(../images/bg_001.png);
  background-repeat:no-repeat;
  background-position: bottom right;
  font-family: Lato, sans-serif;
  font-size: 22px;
  margin-left: 0;
  padding: 0;
}

.tilaustaulukko {
	margin-top: 4%;
	}

@keyframes example {
    from {background-color: red;
         
  }
    to {background-color: yellow;
         
  }
}

@keyframes move{
  from{
    top:0px;
    left:-20vw;
  }
  to{
    left:0px;
  }
  
}
.transparent{
opacity: 1;
	}
    .kieliboksi {
      float: right;
      display: block;
      width: 115px;
      overflow: hidden;
      white-space: nowrap;
      background-color: none;
	  margin-top: -2vh;
    }	
    .kieliboksi div {	
      position: relative;
      display: inline-block;
	  white-space: nowrap;
	  z-index: 3;
    }	
    .kieliboksi:hover {
      width: 115px;
    }	
.otsikkobox{

  position:relative;
  margin-bottom: 0.2vh;
  padding-right:4vw;
  background: linear-gradient(to right,#0000, #4a7474 50%);
  width:60vw;
  height:5vh;
  min-height: 30px;
  max-height: 45px;
  text-align:center;
  animation: move 1s;
  animation-fill-mode: forwards;
  }
 .otsikkotiltbox {

  float: right;
  margin-right: -10vw;
  padding-left: 13vw;
  height: inherit;
  min-height: 30px;
  max-height: 45px;
  background: #4a7474;
  transform: skew(-30deg);
} 
.box{
  position:relative;
  margin-bottom: 1vh;
  padding-right:2vw;
  background: linear-gradient(to right,#0000, #a3bbbb 30%);
  width:75vw;
  height:6vh;
  min-height: 30px;
  max-height: 70px;
  text-align:center;
  animation: move 1s;
  animation-fill-mode: forwards;
  }

.tiltbox {
  float: right;
  margin-right: -10vw;
  padding-left: 16vw;
  height: inherit;
  min-height: 30px;
  max-height: 70px;
  background: #a3bbbb;
  transform: skew(-30deg);
}
.aluevalinta {
	clear:left;
	float: right;
	text-align:left;
	margin-left: -10vw;
	position: absolute;
	top: 0.1vh; 
	left: 62vw;	
	font-size:medium;  
	white-space: nowrap;
	line-height: 0;
	}
.isobox{
  position:relative;
  margin-bottom: 1vh;
  padding-right:1vw;
  background: linear-gradient(to right,#0000, #a3bbbb 30%);
  width:75vw;
  height:8vh;
  min-height: 50px;
  text-align:center;
  animation: move 1s;
  animation-fill-mode: forwards;
  }
.isompibox{
  position:relative;
  margin-bottom: 1vh;
  padding-right:1vw;
  background: linear-gradient(to right,#0000, #a3bbbb 30%);
  width:75vw;
  height:9vh;
  min-height: 50px;
  text-align:center;
  animation: move 1s;
  animation-fill-mode: forwards;
  }  
.isotiltbox {
  float: right;
  margin-right: -10vw;
  padding-left: 18vw;
  height: inherit;
  min-height: 50px;
  background: #a3bbbb;
  transform: skew(-30deg);
}  
.textbox {
	left: 50%;
}
.nappialue {
  position:relative;
  margin-top: 3vh;
  margin-bottom: 0.2vh;
  margin-right:0px;
  padding-right:3vw;
  background: #339966;
  width:60vw;
  height:6vh;
  min-height: 40px;
  max-height: 70px;
  text-align:center;
  white-space: nowrap;
	}
.submittiltbox{
  float: right;	
  margin-right: -8vw;
  padding-left: 13vw;
  height: inherit;
  min-height: 40px;
  max-height: 70px;
  background: #339966;
  transform: skew(-30deg);
  white-space: nowrap;
  }
  .submit-text {
    color: black;
    text-decoration: none;
    font-size: 2.5vw;
	white-space: nowrap;
  }
.laheta{
	margin-bottom: 0.2vh;
	height:5vh;
 	min-height: 40px;
	white-space: nowrap;
	clear:none;
	}

.delay1{
  animation-delay: 0.1s;
  }
.delay2{
  animation-delay: 0.2s;
  }
.delay3{
  animation-delay: 0.3s;
  }  
.delay4{
  animation-delay: 0.4s;
  }  
.delay5{
  animation-delay: 0.5s;
  }    

input {
 margin-top:3px;
 left:-3.8vw;
 width: 30vw;
 min-height:20px;
 max-height:80px;
 font-size: 2vh;
 text-align:center;
}
input.monivalinta {
	min-height:10px;
	max-height:70px;
	border: 0px;
    width: 20%;
	}
input.lahetysnappi {
	background: #339933;	
	border-color: #66ff66;
	border-style: solid;
	margin-top:3px;
	color: #66ff66;
	font-size:4vmin;
	min-height:20px;
	max-height:70px;
	}
	input.mistavalinta {
margin-right: -2vw;
	}
textarea {
 margin-top:2px;
 left:-3.8vw;
 width: 60vw;
 min-height:30px;
 max-height:90px;
 font-size: 2vh;	
	}

h1 {
   margin-top: 0.5vh;
 margin-left: 15vw;
 z-index: 3;
   white-space: nowrap;
   font-size: x-large;
}
.tilt2 {
  transform: skew(0deg, -3deg);
}

.tilt3 {
  transform: skew(0deg, 3deg);
}


.holderiboxi{
   margin-top: 5%;
   margin-left: 5%;
   margin-right: 10%;
	background: none;
   text-align:center;
	}
.otsikkoboxi{
   background: #66dd66;
     transform: skew(-20deg);
	}
.tiltfix{
	margin: 3vh;
	background: none;
     transform: skew(20deg);
	}	
.nappiboxiboxi{
	margin-top:2vh;
   background: green;
	}
.nappialue2 {
	float:right;
  position:relative;
  margin-top: 3vh;
  margin-bottom: 0.2vh;
  margin-left:0px;
    margin-right:0px;
  padding-left:3vw;
  background: #4a7474;
  width:60vw;
  height:6vh;
  min-height: 40px;
  max-height: 70px;
  white-space: nowrap;
	}
.backtiltbox{
  float: left;	
  margin-right: -8vw;
margin-left: -10vw;
padding-left: 13vw;
  height: inherit;
  min-height: 40px;
  max-height: 70px;
  background: #4a7474;
  transform: skew(30deg);
  white-space: nowrap;
  }
  input.backbutton{
	background: #4a7474;
	border-color: #99cccc;
	border-style: solid;
	margin-top:3px;
	margin-left:5vw;
	color: #99cccc;
	font-size:4vmin;
	min-height:20px;
	max-height:70px;
	  }
}