.thebg1{
  background: #6D9EEB;
}

.centertext {
    position: absolute;
    font-size: 5vw;
    top: 50%;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
}
@media(min-aspect-ratio:4/3){
	.centertext{
		font-size: 6.5vh;
	}
}

.wtext{
  color: white;
}

div.headerblock {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    background: #FFD966;
    font-size: 2.5vw;
    padding: 1%;
		height: auto;
		z-index: 5;
}
@media(min-aspect-ratio:4/3){
	.headerblock{
		font-size: 3vh;
	}
}

[class*="cusimg"] {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 43%;
  width: 32%;
}

.cusimg-1 {
  left: 17%;
}
.cusimg-2 {
  left: 50%;
}
.cusimg-3 {
  left: 83%;
}

[class*="drophere"] {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 70%;
  width: 20%;
  background: #D9D9D9;
  border: 0.2em solid #434343;
  border-radius: 5em;
  height: 15%;
  font-size: 2.5vw;
  line-height: 280%;
}

.drophere-1 {
  left: 20%;
}
.drophere-2 {
  left: 50%;
}
.drophere-3 {
  left: 80%;
}

@media (min-aspect-ratio: 4/3){
	[class*="drophere"]{
    font-size: 4vh;
	}
}

[class*="dragthis"] {
	position: absolute;
  top: 85%;
  width: 14%;
  background: #674EA7;
  border: 0.2em solid #674EA7;
  color: white;
  border-radius: 0.5em;
  font-size: 2.5vw;
  padding: 0.5%;
}

.dragthis-1 {
  left: 15.5%;
}
.dragthis-2 {
  left: 42.5%;
}
.dragthis-3 {
  left: 69.5%;
}

@media (min-aspect-ratio: 4/3){
	[class*="dragthis"]{
    font-size: 3.5vh;
	}
}

.forhover:hover{
  cursor: move;
  background: #F6B26B;
  border: 0.2em solid #E69138;
}

.hovered{
    border: 0.2em dashed #434343;
    background: #E5E5E5;
    color: #E5E5E5;
}

.diy2text{
  position: absolute;
  top: 10%;
  left: 0%;
  width: 100%;
  background: #A4C2F4;
  font-size: 2.5vw;
  padding: 2% 1%;
	height: auto;
}

@media(min-aspect-ratio:4/3){
	.diy2text{
		font-size: 5.5vh;
	}
}

[class*="cdiy"] {
	position: absolute;
  top: 45%;
  width: 18%;
  color: white;
  border-radius: 0.5em;
  font-size: 2.5vw;
  padding: 1%;
  transform: translate(-50%);
}

.cdiy-1 {
  left: 20%;
}
.cdiy-2 {
  left: 50%;
}
.cdiy-3 {
  left: 80%;
}

.sentdiy {
  position: absolute;
  top: 45%;
  width: 98%;
  font-size: 2.4vw;
  transform: translate(-50%);
  left: 50%;
  background: #C3E8C8;
  padding: 4% 1%;
}

@media(min-aspect-ratio:4/3){
	.sentdiy{
		font-size: 5vh;
	}
}

.diytyp1{
  background: #8E7CC3;
  border: 0.2em solid #8E7CC3;
}

.diytyp2{
  background: #DF69BD;
  border: 0.2em solid #DF69BD;
}

.diytyp3{
  background: #E69138;
  border: 0.2em solid #E69138;
}

[class*="cusicon"] {
  transform: translate(-50%);
  width: 8%;
  top: 64%;
  position: absolute;
}

.cusicon-one {
  left: 20%;
}

.cusicon-two {
  left: 50%;
}

.cusicon-three {
  left: 80%;
}

.clohover:hover{
  cursor: pointer;
  color: #39B3EE;
}