* {
		  box-sizing: border-box;
		}







		main {
		  width: 800px;
		  border: 1px solid #e0e0e0;
		  margin: 0 auto;
		  display: flex;
		  flex-grow: 1;
		}

		.no-padding{
			padding: 0em;
		}

		.inner-padding{

			padding: 0em 0 3em 0;
			background-color: #FFF;

		}

		.colors {
		  background-color: #fff;
		  text-align: center;
		  padding-bottom: 5px;
		  padding-top: 10px;
		}


		.colors button.color-button {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			border: none;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			padding: 0;
			margin-left: 4px;
			margin-right: 4px;
			transition: 0.15s;
		}
		.colors button.color-button:hover {

			border: solid 4px #0008

		}

		.colors button:nth-of-type(1) {
		  background-color: #c9e5bc;
		}

		.colors button:nth-of-type(2) {
		  background-color: #f4f4f4;
		}

		.colors button:nth-of-type(3) {
		  background-color: #e8e8e8;
		}

		.colors button:nth-of-type(4) {
		  background-color: #f0f0f8;
		}

		.colors button:nth-of-type(5) {
		  background-color: #f8f0f0;
		}

		.colors button:nth-of-type(6) {
		  background-color: #d0d0d0;
		}

		.colors button:nth-of-type(7) {
		  background-color: #d5ebda;
		}


		.brushes {
		  background-color: #fff;
		  padding-top: 5px;
			text-align: center;
		}

		.brushes button.brush-button {
		  display: inline;
		  width: 30px;
			height: 30px;
		  border: 0;
		  border-radius: 50%;
		  background-color: #DDD;
		  margin-bottom: 5px;
			margin-left: 4px;
			margin-right: 4px;

		  padding: 5px;
		  outline: none;
		  position: relative;
		  cursor: pointer;
			transition: 0.15s;
		}

		.brushes button.brush-button:hover {

			border: solid 4px #0008

		}

		.brushes button:after {
		  height: 1px;
		  display: block;
		  background: #808080;
		  content: '';
		}

		.brushes button:nth-of-type(1):after {
		  height: 1px;
		}

		.brushes button:nth-of-type(2):after {
		  height: 2px;
		}

		.brushes button:nth-of-type(3):after {
		  height: 3px;
		}

		.brushes button:nth-of-type(4):after {
		  height: 4px;
		}

		.brushes button:nth-of-type(5):after {
		  height: 5px;
		}

		.brushes button:nth-of-type(6):after {
		  height: 7px;
		}
		.buttons {
		  height: 80px;
		  padding-top: 10px;
		}

		.buttons button {
		  display: block;
		  width: 100%;
		  border: 0;
		  border-radius: 0;
		  background-color: #ece8e8;
		  margin-bottom: 5px;
		  padding: 5px;
		  height: 30px;
		  outline: none;
		  position: relative;
		  cursor: pointer;
		  font-size: 16px;
		}

		.right-block {
		  width: 640px;
		}

		#drawCanvas {
		  cursor:crosshair;
		}


		.collapsable {
		  overflow:hidden;
		  transition:transform 0.3s ease-out;
		  height:auto;
		  transform:scaleY(1);
		  transform-origin:top;
		}
		.collapsable .collapsed {
		  transform:scaleY(0); // *squish*
		}


		#result {
			height: 0px;
			background-image: url('../img/loading.svg');
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: center;
			 transition-delay: 1s;
			transition: all 0.6s ease-in 1s;

		}

		.button-centered {
		  background-color: #fff;
		  padding-top: 5px;
			text-align: center;
		}

		#translatePic {

			width: 180px;
			height: 180px;
			border-radius: 50%;
			content: "sss";
			font-size: 1.5em;
			content: 'ccc';
			transition: all 0.8s ease;
			animation: mymove 5s infinite;

		}

		#translatePic:hover {
			color: rgba(255, 255, 255, 1);
			box-shadow: 0 0px 25px rgba(11, 11, 11, 0.4);
		}

		@keyframes mymove {
			0% {background-color: #3498db;}
			50% {background-color: #175782;}
			100% {background-color: #3498db;}
		}




		.img-comp-container {
		  position: relative;
			height: inherit;
		  /* height: 633px; */
			 /*should be the same height as the images*/
		}

		.img-comp-img {
		  position: absolute;
		  width: auto;
		  height: auto;
		  overflow:hidden;
		}

		.img-comp-img img {
		  display:block;
		  vertical-align:middle;
			width: auto !important;
		}

		.img-comp-slider {
		  position: absolute;
		  z-index:9;
		  cursor: ew-resize;
		  /*set the appearance of the slider:*/
		  width: 40px;
		  height: 40px;
		  background-color: #FFF;
		  opacity: 0.7;
		  border-radius: 50%;
		}