.body-wrapper { margin-bottom: 0px; }
.main-wrapper { width: 100%; margin: 30px auto; text-align: center; max-width: 1100px; }
.main-wrapper .block-center { width: 96%; text-align: left; }

.block-center .gif-preview { display: inline-block; margin: 30px 0 0 30px; width: 300px; height: 226px; }
.block-center .gif-data { display: inline-block; margin: 60px 0 0 30px; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.block-center .gif-text { color: #484848; }
.block-center .gif-text .gif-name { width: 100%; text-align: left; }
.block-center .gif-text .gif-name #name { font-size: 24px; }
.block-center .gif-text .gif-name #score { font-size: 16px; }
.block-center .gif-text .gif-desc { width: 80%; padding-top: 20px; text-align: left; font-size: 14px; margin: 0; }

.block-center .upload-images { margin: 40px 0px 0px 0px; text-align: left; display: non; }

.block-center .upload-images #fileupload { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.block-center .upload-images .button-upload-photo { text-transform: uppercase; font-size: 20px; display: inline; margin: 10px auto; padding: 15px 30px 15px 30px; background-color: #5d89ba; color: #ffffff; cursor: pointer; }
.block-center .upload-images .button-upload-photo:hover { -webkit-box-shadow: 0px 3px 5px 0px rgba(28,64,102,1); -moz-box-shadow: 0px 3px 5px 0px rgba(28,64,102,1); box-shadow: 0px 3px 5px 0px rgba(28,64,102,1); background-color: #4b79ad; }

.block-center #gifim-form { margin: 30px 0 30px 0; display: none; }
.block-center .button-create { margin: 20px 110px 0 0; text-align: left; }
.block-center .button-create #create-effect { display: inline-block; }
.block-center .button-create #change-photo { display: inline-block; margin-left: 20px; }
.block-center .button-create #create-effect-status { line-height: 37px; vertical-align: top; font-size: 14px; color: gray; display: inline-block; padding-left: 10px;}
.block-center .button-create select{ width: 150px; font-size: 12px; }

.block-center .random-effects { margin: 20px 0px 0 30px; }
.block-center .random-effects .effect-img { width: 120px; height: 120px; margin: 5px 10px 0 0px; border: 1px solid #88a9cd; }

.error-spec { width: 70%;  margin: 5px 0 0 0px; text-align: left; }

#dialog-background { background: #c9cfd4; opacity: 0.7; width: 100%; height: 100%; position: fixed; z-index: 100; }

#dialog-face-detect { position: absolute; left: 0; right: 0; top: 20px; margin: 0px auto; width: 50%; z-index: 101; background: #fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding-bottom: 10px; -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.52);-moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.52);box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.52); display: none; }
#dialog-face-detect #dialog-face-detect-top { width: 100%; padding: 15px 0 25px 0; background: #fb7077; color: #fff; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative; z-index: 0; }
#dialog-face-detect #dialog-face-detect-top p { font-size: 20px; margin-top: 5px; }
#dialog-face-detect #face-image-wrapper { width: 100%; text-align: center;  padding: 20px 0 20px 0; background: #fff; z-index: 1; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#dialog-face-detect #face-image-wrapper img { max-height: 300px; cursor: crosshair; }
#dialog-face-detect #face-image-wrapper .face-eyes { width: 6px; height: 6px; background: red; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; position: absolute; }
.button-close-dialog { position: absolute; right: 1px; top: 1px; -webkit-border-radius: 1; -moz-border-radius: 1; border-radius: 1px; font-family: Arial; color: #ffffff; font-size: 14px; padding: 1px 5px 1px 6px;  text-decoration: none; cursor: pointer; }

#face-detect-buttons { margin: 5px auto 10px auto; text-align: center; }
#face-detect-buttons .dialog-button { -webkit-border-radius: 20; -moz-border-radius: 20; border-radius: 20px; font-family: Arial; color: #ffffff; font-size: 12px; background: #5d89ba; padding: 6px 0px 6px 0px; text-decoration: none; cursor: pointer; display: inline-block; }
#face-detect-buttons .dialog-button:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; }
#face-detect-buttons #text-eyes-error { font-size: 14px; color: #fb7077; text-align: center; display: none; }

#face-detect-buttons #button-change { width: 90px; display: none; }
#face-detect-buttons #button-apply { width: 90px; }

@media screen and (max-width: 800px){
	.main-wrapper { width: 100%; margin: 15px auto; }
	.main-wrapper .block-center { width: 94%; margin: 0 auto; }
	.header .header-tabs { display: none; }
	.main-wrapper .block-center { text-align: center; }

	.block-center .gif-preview { margin: 10px auto 10px auto; }
	.block-center .gif-data { width: 80%; margin: 10px auto 35px auto; }
	.block-center .gif-text .gif-name #name { font-size: 18px; }
	.block-center .gif-text .gif-name #score { font-size: 14px; }
	.block-center .gif-text .gif-desc { font-size: 12px; width: 100%; }

	.block-center .random-effects { margin: 10px auto; width: 80%; text-align: left; }
	.block-center .random-effects .effect-img { width: 120px; height: 120px; margin: 5px 5px 5px 0; border: 1px solid #88a9cd; }

	.block-center #gifim-form { margin: 20px auto 10px auto; width: 100%; text-align: left; }
	.block-center .button-create { margin: 10px 0; text-align: left; }
	.block-center .button-create #create-effect { margin: 10px 0 0 0; }
	.block-center .button-create #change-photo { margin: 10px 0 0 0; }
	.block-center .button-create #create-effect-status { padding-left: 0px;}

	#dialog-face-detect { width: 90%; }
	#dialog-face-detect #dialog-face-detect-top { padding: 5px 8px 10px 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	#dialog-face-detect #dialog-face-detect-top p { font-size: 15px; margin-top: 5px; }
	#dialog-face-detect #face-image-wrapper { width: 100%; padding: 20px 0 20px 0; }
	#dialog-face-detect #face-image-wrapper img { max-width: 250px; max-height: 300px; cursor: crosshair; }
}