.cropper-container {
               zoom: 0.4;
			display:block;
			margin:auto;
        }

            .modal:before {
                display: inline-block;
                vertical-align: middle;
                content: " ";
                height: 100%;
            }
		.modal{
			opacity: 1 !important;
		}
        .modal-dialog {
            width: 90%;
            display: inline-block;
            text-align: left;
            vertical-align: middle;
			max-width: 800px;
			transform: none !important;
        }
        .modal-content{
            border-radius: 50px;
            background: black;
        }
        .btn {
            font-family: inherit !important;
            margin-bottom: 20px;
        }
        * {
            margin: 0;
            padding: 0;
        }
        *, *:before, *:after {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
			max-width:700px;
			margin:auto;
            background-color: #47d1da;
            color: white;
            font-family: Helvetica,Arial;
            text-align: center;
        }
        div {
            display: inline-block;
            position: relative;
            -webkit-animation: rotate 1.5s linear infinite;
            animation: rotate 1.5s linear infinite;
        }
        small {
            display: block;
            line-height: 2.25em;
        }



        .reloadSingle {
            height: 1em;
            padding: .25em;
            width: 1em;
        }
        .reloadSingle:before, .reloadSingle:after {
                       content: '';
                       display: block;
        }
        .reloadSingle:before {
             border-color: transparent white white white;
             border-radius: 50%;
             border-style: solid;
             border-width: .125em;
             height: 1em;
             width: 1em;
             -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
         }
        .reloadSingle:after {
             border-color: transparent transparent transparent white;
             border-style: solid;
             border-width: .3125em 0 .3125em .5em;
             height: 0;
             position: absolute;
             top: 0;
             left: 70%;
             width: 0;
        }
        #rotateR{
            background: #072ead;
        }




    </style>
    <title>Mosaic Wall</title>
    <style>
        .layout {
            height: 100%;
        }

        .layout * {
            box-sizing: border-box;
        }

        .layout body {
            width: 100%;
            height: 100%;
            padding: 20px;
            color: #111;
            background-image: radial-gradient(ellipse farthest-corner at center, #e3fdfc 0%, #e3fdfc 100%);
        }

        .layout h1 {
            font-family: Lobster, Arial;
            text-align: center;
        }

        .layout .btn {
            position: absolute;
            right: 5px;
            bottom: 5px;
            z-index: 999;
            padding: 6px 10px;
            font-size: 35px;
            color: #fff;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#c92437), to(#9e1c2b));
            background-image: linear-gradient(to bottom, #c92437 0%, #9e1c2b 100%);
            border: 0;
            border-radius: 5px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .ic-container {
            position: relative;
        }

        .ic-overlay-n,
        .ic-overlay-e,
        .ic-overlay-s,
        .ic-overlay-w {
            position: absolute;
            background-color: #000;
            opacity: 0.7;
        }

        .ic-overlay-n {
            top: 0;
        }

        .ic-overlay-e {
            top: 0;
            right: 0;
            bottom: 0;
        }

        .ic-overlay-s {
            bottom: 0;
        }

        .ic-overlay-w {
            top: 0;
            bottom: 0;
            left: 0;
        }

        .ic-resize-handle-ne,
        .ic-resize-handle-se,
        .ic-resize-handle-nw,
        .ic-resize-handle-sw {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #c92437;
            z-index: 999;
        }

        .ic-resize-handle-nw {
            top: -10px;
            left: -10px;
            cursor: nw-resize;
        }

        .ic-resize-handle-sw {
            bottom: -10px;
            left: -10px;
            cursor: sw-resize;
        }

        .ic-resize-handle-ne {
            top: -10px;
            right: -10px;
            cursor: ne-resize;
        }

        .ic-resize-handle-se {
            bottom: -10px;
            right: -10px;
            cursor: se-resize;
        }

        .ic-crop-marker {
            position: absolute;
            z-index: 999;
            border: solid 2px rgba(201, 36, 55, 0.5);
            cursor: move;
        }

        .ic-move-handle {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .ic-container img {
            display: block;
            max-width: 100%;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            padding: 20px;
            text-align: center;
            color: #111;
            background-image: radial-gradient(ellipse farthest-corner at center, #ffffff 0%, #ffffff 100%);
        }

        img {
            max-width: 100%;
        }
		
		textarea{
			width: 80%;
			height: calc(100% - 500px);
			margin: 20px;
			padding: 50px;
			font-size: 2vh;
			border: 1px solid;
			font-weight: normal;
		}
 		.agree-btn:disabled {
            background-color: grey;
            cursor: not-allowed;
        }
		.agree-btn{
			display: block;
			text-align: center;
			width: 100%;
			height: 50px;
			border-radius: 10px;
			margin: 10px 0;
			background: #000000;
			color: white;
			border: none;
			margin-bottom: 20px;
		}
		.back-btn{
			    display: block;
				text-align: center;
				width: 100%;
				padding: 10px;
				border-radius: 10px;
				margin: 10px 0;
				background: #000000;
				color: white;
				border: none;
				margin-bottom: 20px;
				text-decoration: none;
		}
		
        section#sectionDragAndDrop {
            height: 100%;
			padding: 0 20px;
        }
		section#t_and_c{
			text-align: left;
			padding: 0 20px;
			display: inline-table;
		}
		.title,#title{
			font-size: 15px;
    		margin: 15px 0;
			font-weight: bold;
			letter-spacing: 0px;
			display: block;
			line-height: normal;
		}
		#desc{
			font-size: 13px;
			font-weight: bold;
			padding-bottom: 15px;
		}
        #sectionMessage{
            height: auto !important;
        }

        .hidden {
            display: none !important;
        }
		#logo img{
			padding: 20px 0;
    		width: 75%;
			display: block;
		}
		#banner img{
		}
		#tc_title,#tc_desc{
			margin-bottom:15px;
			font-size: 12px;
			opacity: 0.40;
		}
		.drop:before{
			background-image: url();
			content: ' ';
			display: block;
			position: absolute;
			height: 100%;
			width: 100%;
			background-size: contain;
			opacity: 0.15;
		}
        .drop {
			max-width:800px;
			display:block;
            position: relative;
			margin:auto;
			margin-top:10px;
            width: 100%;
            height: calc(100vh - 300px);
            font-family: Lobster, Arial, serif;
            font-size: 30px;
            color: #c5c5c5;
    		background-color: #e4e4e4;
    		border: 2px dashed #232323;
            cursor: pointer;
            transition-properties: border;
            -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
            border-radius: 15px;
        }

        .drop.dragging,
        .drop:hover {
            border-color: rgba(51, 51, 51, 0.8);
        }

        .drop p {
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -70px;
            margin-bottom: 0;
            text-align: center;
        }

        .image-resize {
            max-width: 800px;
            margin: auto;
        }

        .btn {
            margin-top: 20px;
            padding: 4px 15px;
            font-family: "Ubuntu";
            font-size: 16px;
            color: #fff;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#c92437), to(#9e1c2b));
            background-image: linear-gradient(to bottom, #c92437 0%, #9e1c2b 100%);
            border: 0;
            border-radius: 5px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .btn .fa:first-child {
            margin-right: 5px;
        }

        .thumbnail {
            display: inline-block;
            margin: auto;
            padding: 5px;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 5px;
        }

        .thumbnail img {
            display: block;
            border-radius: 5px;
        }



        #container {
            position: relative;
            margin: auto;
            overflow: hidden;
        }

        h1 {
            font-size: 20px;
            font-weight: 100;
            letter-spacing: 3px;
            padding-top: 5px;
            color: #ffffff;
            padding-bottom: 5px;
            text-transform: uppercase;
        }

        .green {
            color: #434343;
        }

        .red {
            color: #e96075;
        }

        .alert {
            font-weight: 700;
            letter-spacing: 5px;
            color: #252525;
        }

        p {
            margin-top: -5px;
            font-size: 20px;
            font-weight: 100;
            color: #5e5e5e;
        }

        button, .dot {
            cursor: pointer;
        }

        #success-box {
            width: 100%;
            /*background: linear-gradient(to bottom right, #B0DB7D 40%, #99DBB4 100%);*/
            border-radius: 20px;
            /*box-shadow: 5px 5px 20px #cbcdd3;*/
            perspective: 40px;
            max-width: 800px;
            margin: auto;
        }
		#success-box #title{
			text-align: left;
    		padding: 0 15px;
		}
.underline{
text-decoration: underline;
}

        #error-box {
            width: 35%;
            height: 100%;
            background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);
            border-radius: 20px;
            box-shadow: 5px 5px 20px #cbcdd3;
            perspective: 40px;
            max-width: 800px;
            margin: auto;
        }
		#info-preview{
			width: 97%;
			padding: 10px 35px;
			text-align: left;
			border: 1px solid #d7d7d7;
			border-radius: 15px;
			line-height: 12px;
        }

        #preview{
			width: 97%;
			margin: auto;
			padding-top: 20px;
			border: 1px solid #85ceff;
			border-radius: 30px;
			box-shadow: 0px 0px 6px 0px #92d3ff;
        }

        #preview-img {
            display: block;
        }
        #preview-img img{
			width: 440px;
			padding: 0 20px;
			max-width: 100%;
        }
		#preview a, #preview .detail, #preview #no{
            display: block;
			font-size: 30px;
			margin: 10px;
        }
		#preview #no{
			font-size: 40px;
			margin-bottom: 20px;
        }
	 	#info-preview .title{
			font-weight: normal;
		}
		.bold{
			font-weight: bolder;
		}
		#preview .detail{
			font-size: 12px;
    		margin: 0 25px 25px;
		}
		#qrcode{
		    margin: 40px 0px;
        }
		.footer{
			margin-top: 50px;
			font-size: 30px;
			line-height: 50px;
		}
        #frame{
            width: 500px;
            position: absolute;
			border: 1px solid;
			display:none;
        }

        .dot {
            width: 8px;
            height: 8px;
            background: #FCFCFC;
            border-radius: 50%;
            position: absolute;
            top: 4%;
            right: 6%;
        }
        .dot:hover {
            background: #c9c9c9;
        }

        .two {
            right: 12%;
            opacity: .5;
        }

        .face {
            position: absolute;
            width: 22%;
            height: 22%;
            background: #FCFCFC;
            border-radius: 50%;
            border: 1px solid #777777;
            top: 21%;
            left: 37.5%;
            z-index: 2;
            animation: bounce 1s ease-in infinite;
        }

        .face2 {
            position: absolute;
            width: 22%;
            height: 22%;
            background: #FCFCFC;
            border-radius: 50%;
            border: 1px solid #777777;
            top: 21%;
            left: 37.5%;
            z-index: 2;
            animation: roll 3s ease-in-out infinite;
        }

        .eye {
            position: absolute;
            width: 5px;
            height: 5px;
            background: #777777;
            border-radius: 50%;
            top: 40%;
            left: 20%;
        }

        .right {
            left: 68%;
        }

        .mouth {
            position: absolute;
            top: 43%;
            left: 41%;
            width: 7px;
            height: 7px;
            border-radius: 50%;
        }

        .happy {
            border: 2px solid;
            border-color: transparent #777777 #777777 transparent;
            transform: rotate(45deg);
        }

        .sad {
            top: 49%;
            border: 2px solid;
            border-color: #777777 transparent transparent #777777;
            transform: rotate(45deg);
        }

        .shadow {
            position: absolute;
            width: 21%;
            height: 3%;
            opacity: .5;
            background: #777777;
            left: 40%;
            top: 43%;
            border-radius: 50%;
            z-index: 1;
        }

        .scale {
            animation: scale 1s ease-in infinite;
        }

        .move {
            animation: move 3s ease-in-out infinite;
        }

        .message {
            width: 100%;
            text-align: center;
        }

        .button-box {
            background: #FCFCFC;
            width: 50%;
            border-radius: 20px;
            outline: 0;
            border: none;
            box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
            transition: all .5s ease-in-out;
            margin-bottom: 20px;
        }
        .button-box:hover {
            background: #efefef;
            transform: scale(1.05);
            transition: all .3s ease-in-out;
        }

        @keyframes bounce {
            50% {
                transform: translateY(-10px);
            }
        }
        @keyframes scale {
            50% {
                transform: scale(0.9);
            }
        }
        @keyframes roll {
            0% {
                transform: rotate(0deg);
                left: 25%;
            }
            50% {
                left: 60%;
                transform: rotate(168deg);
            }
            100% {
                transform: rotate(0deg);
                left: 25%;
            }
        }
        @keyframes move {
            0% {
                left: 25%;
            }
            50% {
                left: 60%;
            }
            100% {
                left: 25%;
            }
        }

        /* Absolute Center Spinner */
        .loading {
            position: fixed;
            z-index: 999;
            height: 2em;
            width: 2em;
            overflow: show;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        /* Transparent Overlay */
        .loading:before {
            content: '';
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

            background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
        }

        /* :not(:required) hides these rules from IE9 and below */
        .loading:not(:required) {
            /* hide "loading..." text */
            font: 0/0 a;
            color: transparent;
            text-shadow: none;
            background-color: transparent;
            border: 0;
        }

        .loading:not(:required):after {
            content: '';
            display: block;
            font-size: 10px;
            width: 1em;
            height: 1em;
            margin-top: -0.5em;
            -webkit-animation: spinner 150ms infinite linear;
            -moz-animation: spinner 150ms infinite linear;
            -ms-animation: spinner 150ms infinite linear;
            -o-animation: spinner 150ms infinite linear;
            animation: spinner 150ms infinite linear;
            border-radius: 0.5em;
            -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
            box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
        }

        /* Animation */

        @-webkit-keyframes spinner {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-moz-keyframes spinner {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-o-keyframes spinner {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes spinner {
            0% {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }