body {
    overflow: hidden;
    background-color:darkgray;
    position: absolute;
    top: 0;
    left:0;
    width: 300px;
    height:250px;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}

#ad {
    position: absolute;
    width: 300px;
    height: 250px;
    top: 0px;
    left: 0px;
    margin: auto;
    background-color: #7b7c7b;
}

#clickCon {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 300px;
    height: 250px;
    cursor: pointer;
    z-index: 999;
}

#content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 100;
    overflow: hidden;
    opacity: 0;
}



#border{
    position: absolute;
    left: 0px;
    top: 0px;
    border: 1px solid #000000;
    width:300px;
    height:250px;
    z-index: 300;
    box-sizing: border-box;
}


#clip1{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px;
    clip:rect(0px 300px 250px 0px);
    z-index: 20;

}


#clip2{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px; 
    clip:rect(0px 300px 250px 0px);
    z-index: 20;


}


#clip3{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px;
    clip:rect(0px 300px 250px 5px);
    z-index: 20;

}


#clip4{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px;
    clip:rect(0px 180px 250px 0px);
    z-index: 20;

}


#clip5{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px;
    clip:rect(0px 300px 250px 0px);
    z-index: 20;

}


#clip6{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px; 
    clip:rect(0px 300px 250px 0px);
    z-index: 20;

}


#clip7{ 
    position: absolute;
    width: 300px; 
    height: 250px;
    top: 0px; 
    left: 0px;
    clip:rect(0px 300px 250px 0px);
    z-index: 20;

}


#clip8{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px; 
    clip:rect(0px 300px 250px 0px);
    z-index: 20;

}


#clip9{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px;
    clip:rect(0px 300px 250px 0px);
    z-index: 20;

}


#clip10{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px; 
    clip:rect(0px 300px 250px 0px);
    z-index: 20;

}


#clip11{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px;
    clip:rect(0px 300px 250px 0px);
    z-index: 20;


}


#clip12{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px; 
    clip:rect(0px 300px 250px 0px);
    z-index: 20;

}

#clip13{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px;
    clip:rect(0px 300px 250px 0px);
    z-index: 20;

}


#clip14{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px; 
    clip:rect(0px 300px 250px 0px);
    z-index: 20;


}

#clip15{ 
    position: absolute; 
    width:300px; 
    height:250px;
    top: 0px; 
    left: 0px; 
    clip:rect(0px 300px 250px 0px);
    z-index: 20;


}



.canvas_size {
    position: absolute;
    background-repeat: no-repeat;
}


.explore{
    top: 100px;
    left: 16.5px;
    width: 86px;
    height: 13px;
    background: url('../img/explore.png') no-repeat;
    position: absolute;
    z-index: 3;
}

.humanity{
    top: 127px;
    left: 20px;
    width: 257px;
    height: 12px;
    background: url('../img/humanity.png') no-repeat;
    position: absolute;
    z-index: 3;
}

.recreate{
    top: 25px;
    left: 110px;
    width: 129px;
    height: 13px;
    background: url('../img/recreate.png') no-repeat;
    position: absolute;
    z-index:3;
}

.ourselves{
    top: 42px;
    left: 168px;
    width: 115px;
    height: 11px;
    background: url('../img/ourselves.png') no-repeat;
    position: absolute;
    z-index: 3;
}

.mechanised{
    top: 58px;
    left: 117px;
    width: 154px;
    height: 11px;
    background: url('../img/mechanised.png') no-repeat;
    position: absolute;
    z-index: 3;
}

.blackOut{
    top: 94px;
    left: 17px;
    width: 160px;
    height: 23px;
    background: url('../img/blackOut.png') no-repeat;
    position: absolute;
    z-index: 2;
}



.squaresWhite{
    top: 122.5px;
    left: 7px;
    width: 211px;
    height: 2px;
    background: url('../img/squaresWhite.png') no-repeat;
    position: absolute;
    z-index: 2;
}

.whiteLine{
    top: 120px;
    left: 0px;
    width: 187px;
    height: 1px;
    background: url('../img/whiteLine.png') no-repeat;
    position: absolute;
    z-index:2;
    background-size: contain;
}

.whiteLine2{
    top: 144px;
    left: 34px;
    width: 187px;
    height: 1px;
    background: url('../img/whiteLine.png') no-repeat;
    position: absolute;
    z-index: 2;
    background-size: contain;

}

.whiteLine3{
    top: 40px;
    left: 132px;
    width: 187px;
    height: 1px;
    background: url('../img/whiteLine.png') no-repeat;
    position: absolute;
    z-index: 2;
    background-size: contain;

}


.whiteLine4{
    top: 54px;
    left: 104px;
    width: 187px;
    height: 1px;
    background: url('../img/whiteLine.png') no-repeat;
    position: absolute;
    z-index:2;
    background-size: contain;

}


.whiteOut{
    top: 92px;
    left: 8.5px;
    width: 160px;
    height: 23px;
    background: url('../img/whiteOut.png') no-repeat;
    position: absolute;
    z-index:2;
}

.blackOut2{
    top: 19px;
    left: 109px;
    width: 160px;
    height: 23px;
    background: url('../img/blackOut.png') no-repeat;
    position: absolute;
    z-index: 2;
}

.squaresBlack2{
    top: 71px;
    left: 133px;
    width: 167px;
    height: 2px;
    background: url('../img/squaresBlack.png') no-repeat;
    position: absolute;
    z-index: 1;
}



.whiteOut2{
    top: 16.5px;
    left: 104px;
    width: 160px;
    height: 23px;
    background: url('../img/whiteOut.png') no-repeat;
    position: absolute;
    z-index: 1;
}

.robotLegs{
    top: 0px;
    left: 75px;
    width: 191px;
    height: 243px;
    background: url('../img/robotLegs.png') no-repeat;
    position: absolute;
    z-index: 1;
}

.faceBot{
    top: 0px;
    left: 4px;
    width: 292px;
    height: 250px;
    background: url('../img/faceBot.png') no-repeat;
    position: absolute;
    z-index: 1;
}

.humanHead{
    top: 0px;
    left: 0px;
    width: 300px;
    height: 250px;
    background: url('../img/humanHead.jpg') no-repeat;
    position: absolute;
    z-index: 1;
}

.baby{
    top: 0px;
    left: 16px;
    width: 164px;
    height: 239px;
    background: url('../img/baby.png') no-repeat;
    position: absolute;
    z-index: 1;
}
                    
.floor{
    bottom: 0px;
    left: 0px;
    width: 300px;
    height: 115px;
    background: url('../img/floor.png') no-repeat;
    position: absolute;
    z-index: 1;
}

.bgStars{
    top: 0px;
    left: 0px;
    width: 500px;
    height: 250px;
    background: url('../img/bg.jpg') no-repeat;
    position: absolute;
    z-index: 0;
}





#robot2{
    width: 300px;
    height: 250px;
    z-index: 22
}


.head{
    background-image: url("../img/head.png");
    left: 5px;
    top: 20px;
    height: 83px;
    width: 83px;
    z-index: 3;
    transform-origin: 30% 80%;
}

.body{
    background-image: url("../img/body.png");
    left: -17px;
    top: 64px;
    height: 188px;
    width: 177px;
    z-index: 2; 
}

.title {
    width: 184px;
    height: 36px;
    background: url('../img/title.png') no-repeat;
    position: absolute;
    top: 88px;
    right: 7px;
    z-index: 23;
}

.subHead{
    top: 130px;
    right: 7px;
    width: 184px;
    height: 25px;
    background:  url("../img/subHead.png") no-repeat;
    position: absolute;
    z-index: 23;
}

.btn{
    top: 191px;
    right: 7px;
    width: 124px;
    height: 19px;
    position: absolute;
    background:  url("../img/btn.png") no-repeat;
    z-index: 23;


}

.smLogo{
    top: 7px;
    right: 7px;
    width: 49px;
    height: 66px;
    background:  url("../img/smLogo.png") no-repeat;
    position: absolute;
    z-index: 23;
}

.media{
    top: 227px;
    left: 90px;
    width: 60px;
    height: 18px;
    position: absolute;
    background:  url("../img/media.png") no-repeat;
    z-index: 23;
}

.dates{
    top: 0px;
    left: 0px;
    width: 264px;
    height: 120px;
    position: absolute;
    background:  url("../img/dates.png") no-repeat;
    z-index: 2;
}

.credit{
    top: 237px;
    left: 3px;
    width: 57px;
    height: 6px;
    position: absolute;
    background:  url("../img/credit.png") no-repeat;
    z-index: 23;
}

.q011{
    background-image: url("../img/q011.png");
    left: 0px;
    bottom: 0px;
    width: 300px;
    height: 250px;
    z-index: 24; 
}

.q012{
    background-image: url("../img/q012.png");
    left: 0px;
    bottom: 0px;
    width: 300px;
    height: 250px;
    z-index: 24; 
}

.q013{
    background-image: url("../img/q013.png");
    left: 0px;
    bottom: 0px;
    width: 300px;
    height: 250px;
    z-index: 24; 
}

.q014{
    background-image: url("../img/q014.png");
    left: 0px;
    bottom: 0px;
    width: 300px;
    height: 250px;
    z-index: 24; 
}

.q021{
    background-image: url("../img/q021.png");
    left: 0px;
    bottom: 0px;
    width: 300px;
    height: 250px;
    z-index: 24; 
}

.q022{
    background-image: url("../img/q022.png");
    left: 0px;
    bottom: 0px;
    width: 300px;
    height: 250px;
    z-index: 24; 
}

.q023{
    background-image: url("../img/q023.png");
    left: 0px;
    bottom: 0px;
    width: 300px;
    height: 250px;
    z-index: 24; 
}

.q024{
    background-image: url("../img/q024.png");
    left: 0px;
    bottom: 0px;
    width: 300px;
    height: 250px;
    z-index: 24; 
}


.backgroundHalo{
    top: 0px;
    left: 0px;
    width: 300px;
    height: 250px;
    position: absolute;
    background-image:  url("../img/halo.png");
    background-repeat: no-repeat;
    z-index: 22;

}




.background{
    top: 0px;
    left: 0px;
    width: 300px;
    height: 250px;
    position: absolute;
    background-color: #767675;
    z-index: 0;

}