body
{
  font-size: 1.5vw;
  font-family: "Tahoma", sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#resizeContainer {
    background: grey;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
	
}
#mainContainer{
	margin: auto;
	margin-top:2%;
	width:96%;
	height:90%;
	background-color:white
	}
/***************************************/
.instruction-div{
  width:100%;
  height: 7%;
  background-color: white;
  text-align: center;
}
.instruction-div p{

  font-family: tahoma;
  font-size: 180%;
  font-weight: bold;
  display: inline;
  line-height: 125%
}
.playground{

  width: 96%;
  height: 51%;
  text-align: left;
  background-color: white;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 3%;
  text-align: justify;
  text-justify: inter-word;

}
.playground img{

  width:100%;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 1%;

}
.paragraph-text{

  font-family: tahoma;
  font-size: 162%;
  display: inline;
  line-height: 220%
  
}
.paragraph-div{
  width: 19%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  position: relative;
}
.draggable-items-div{
  width: 100%;
  height: 30%;
  margin-top: 2%;
  background-color: white;
  text-align:center
}
.sub-column{
  width: 19%;
  height: 100%;
  margin-right: 0.5%;
  margin-left: 0.5%;
  
  display: inline-block;
}
.draggable-item {
  width: 100%;
  height: 25%;
  display: block;
  cursor: pointer;
  position: relative;
  text-align: center !important
}
.draggable-item img{
  position: absolute;
  top:0;
  left: 0;
  width:100%;
  
}
.draggable-item p{
  position: absolute;
  top:0;
  left: 0;
  color: white;
  width: 100%;
  font-family: tahoma;
  font-size: 170%;
  display: inline;
  line-height: 1%
}
.header{
  width:100%;
  height: 12%;
  background-color: lightgrey;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 10px 0px rgba(153,147,153,1);
  -moz-box-shadow: 5px 5px 10px 0px rgba(153,147,153,1);
  box-shadow: 5px 5px 10px 0px rgba(153,147,153,1);
}
.header-empty{
 width:100%;
  height: 12%;

}
.header p{
  color: white;
  width: 100%;
  font-family: tahoma;
  color: slategrey;
  font-size: 170%;
  display: inline;
  line-height: 200%

}
.drop-box{

  width:100%;
  height:58%;
  margin-top:15%;
  /*background-color: lightgrey;*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  /*
  -webkit-box-shadow: 5px 5px 10px 0px rgba(153,147,153,1);
  -moz-box-shadow: 5px 5px 10px 0px rgba(153,147,153,1);
  box-shadow: 5px 5px 10px 0px rgba(153,147,153,1);
  */
  text-align: center;
}
.text-box{
  width:100%;
  height:70%;
  margin-top:15%;
 
  text-align: center;

}
.text-box-item{

  width:100%;
  height: 16%;
  background-color: lightgrey;
  margin-bottom: 20%;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 10px 0px rgba(153,147,153,1);
  -moz-box-shadow: 5px 5px 10px 0px rgba(153,147,153,1);
  box-shadow: 5px 5px 10px 0px rgba(153,147,153,1);
}
.drop-box-item{

  width:100%;
  height: 16%;
  margin-bottom: 22%;
  position: relative;
  text-align: center;
}
.drop-box-item img{

  width:100%
}
.text-box-item p{
  color: white;
  width: 100%;
  font-family: tahoma;
  color: slategrey;
  font-size: 170%;
  display: inline;
  line-height: 200%

}
.static-item{

  width: 100%;
  height: 20%;
 
  text-align: center;
   position: relative;
  text-align: center !important;
  display: block
}
.static-item img{
  position: absolute;
  top:0;
  left: 0;
  width:100%;
  height: 100%


}
 
.static-item p{

  position: absolute;
  top:0;
  left: 0;
  color: white;
  width: 100%;
  font-family: tahoma;
  font-size: 205%;
  display: inline;
  line-height: 1%
}
.drop-box-item-text{
  color:white;
  position: absolute;
  width:100%;

  font-family: tahoma;
  font-size: 98%;
  line-height: 15%;
  top:0;
  left:0

}

.pipa{
  width:100%
}