.scratchpad{
	width: 720px;
	height: 720px;
}
canvas{
	left:0px;	
}

.container{
	width:90%;
	height:50%;
}
.content-box{
	width:720px;
}
.marginTop{
	position:relative; 
	margin-top:-38%;
}
.flickTube{
	cursor:pointer;
	-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;		
}
.flickTube:hover{
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);	
}

@media screen and (max-width:767px){
	.scratchpad{
		width: 120px;
		height: 120px;
	}
	.marginTop{
		margin-top:-53.5%;
	}
	.content-box{
		margin-top:25%;
		margin-left:-216%;
	}
}
@media (min-width:768px) and (max-width:991px) {
	.scratchpad{
		width: 160px;
		height: 160px;
	}
	.marginTop{
		margin-top:-53.5%;
	}
	.content-box{
		margin-top:25%;
		margin-left:-142%;
	}
}


@media (min-width:992px) and (max-width:1199px) {
	.scratchpad{
		width: 420px;
		height: 420px;
	}
	.marginTop{
		margin-top:-53.5%;
	}
	.content-box{
		margin-top:23%;	
		margin-left:-25%;
	}
}

@media (min-width:1200px) and (max-width:1399px) {
	.scratchpad{
		width: 520px;
		height: 520px;
	}
	.marginTop{
		margin-top:-43.5%;
		margin-left:-4%;
	}
	.content-box{
		margin-top:5%;	
	}
}

@media (min-width:1400px) and (max-width:1599px) {
	.scratchpad{
		width: 560px;
		height: 560px;
	}
	.marginTop{
		margin-top:-43.5%;
		margin-left:-2%;
	}
	.content-box{
		margin-top:5%;	
	}
}

@media (min-width:1600px) {
	
}