/****** general ******/

@import url('https://fonts.googleapis.com/css?family=Montserrat|Roboto+Condensed');
html, body { margin: 0; padding: 0; font-family: verdana,arial,tahoma; text-align: center; height: 100%; }

.group:after { content: ""; display: table; clear: both; }

.content-wrapper { max-width: 1366px; text-align: left; position: relative; margin: 0 auto; }
.effector-header { font-family: 'Roboto Condensed', sans-serif; font-size: 45px; color: #f9b261; font-weight: normal; position: absolute; left: 10px; top: -90px; }
#ad-block-300x600 { max-width: 300px; max-height: 600px; margin: 0px 5px 5px 5px; vertical-align: top; position: absolute; padding-top: 0px; }

.content-body { margin: 10px 0px 0px 315px; }

.msg-error { color: red; font-size: 11px; }
.msg-ok { color: green; font-size: 11px; }

/****** template ******/

.content-body .ads { margin: 15px auto 10px auto; }
.content-body .ads .ads-2 { width: 100%; height: auto; text-align: center; }
.content-body .ads-3 { width: 99%; height: auto; text-align: center; margin-top: 10px; }

#content-preloader { background: url('/img/design/preloader.gif') center no-repeat; width: 32px; height: 32px; margin: 50px auto; }
.content-body .template-wrapper { width: 100%; text-align: left; padding: 10px 0 0 20px;  box-sizing: border-box; visibility: hidden; }

.template-wrapper #template-image { width: 250px; height: 250px; display: inline-block; vertical-align: top; text-align: center; background-color: #ffffff; }
.template-wrapper #template-image #template-image-preview-max { display: none; }
.template-wrapper .template-info { display: inline-block; vertical-align: top; margin: 5px 0px 0px 30px; text-align: left; width: 500px; }
.template-wrapper .template-info h1 { color: #006666; font-size: 22px; font-family: verdana; font-weight: normal; padding:0; margin:0; }
.template-wrapper .template-info p { margin-top: 15px; font-size: 13px; color: #5c5c5c; font-family: verdana; line-height: 18px; width: 90%; }
.template-wrapper .template-info .ads-3 { width: 468px; margin: 5px 0 15px 0; overflow: hidden; position: absolute; }
.template-wrapper .template-info #choose-photo-button { font-family: verdana; font-size: 18px; text-align: center;  padding: 7px 16px 7px 16px; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fff; color: #006666; border: 2px solid #006666; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; margin-top: 90px; }
.template-wrapper .template-info #choose-photo-button:hover { -webkit-box-shadow: 0px 0px 8px 0px rgba(0,102,102,1); -moz-box-shadow: 0px 0px 8px 0px rgba(0,102,102,1); box-shadow: 0px 0px 8px 0px rgba(0,102,102,1); }
.template-wrapper .template-info #choose-photo-button #img-uploaded-loader { display: inline-block; }
.template-wrapper .template-info #choose-photo-button #img-uploaded-loader img{ width: 18px; height: 18px; }

.template-wrapper .rand-effects-wrapper { width: 100%; margin-top: 65px; } 
.template-wrapper .rand-effects-wrapper .rand-effects-title { width: 100%; font-size: 12px; text-align: left; padding-left: 20px; text-transform: uppercase; box-sizing: border-box; }
.template-wrapper .rand-effects-wrapper .rand-effects-row { }
.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper { display: inline-block; margin: 2px; }
.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper img { width: 192px; height: 192px; }

.arrow-wrapper { display: block; width: 350px; height: 34px; position: relative; margin: 20px 0 10px 0; }
.arrow-wrapper .arrow { position: absolute; top: 0px; text-align: center; background-color: #006666; cursor: pointer; color: #ffffff; font-size: 15px;  font-family: verdana; transform: scaleY(2); box-sizing: border-box; width: 35%; border: 2px solid #fff; }
.arrow-wrapper .arrow-inactive { position: absolute; top: 0px; text-align: center; background-color: #afafaf; cursor: pointer; color: #ffffff; font-size: 15px;  font-family: verdana; transform: scaleY(2); box-sizing: border-box; width: 35%; border: 2px solid #fff; }
.arrow-wrapper #arrow-left { left: 0; padding: 2px 0 2px 0; left: -2px; }
.arrow-wrapper #arrow-right { right: 0; padding: 2px 0 2px 0; right: 2px; }
.arrow-wrapper .arrow:hover { background-color: #1e8e8e; }
.arrow-wrapper .arrow-inactive:hover { background-color: #afafaf; }
.arrow-wrapper .effects-counter { width: 100%; text-align: center; font-size: 14px; color: #066; }

/****** work zone dialog ******/

.work-zone-wrapper { position: absolute; z-index: 1001; top: 0; left: 0; background-color: rgba( 95, 95, 95, 0.5 ); width: 100%; height: 100%; position: fixed; display: none; }
//.work-zone-wrapper .work-zone { background-color: #ffffff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); margin: 80px auto; padding: 20px; vertical-align: middle; }
.work-zone-wrapper .work-zone { background-color: #ffffff; -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); margin: 80px auto; padding: 2px; vertical-align: middle; }

.work-zone .user-image-wrapper { margin: 0 auto; }
.work-zone .user-image-wrapper #user_image { border: 1px solid #006666; display: none; width: 100%; }
.work-zone #user_image_preloader { margin: 40% auto; height: 32px; width: 32px; background: url('/img/design/preloader.gif') center no-repeat; display: none; }
.work-zone #form_save #image-buttons { margin: 15px auto; color: #006666; font-size: 13px; text-align: center; display: none; }
.work-zone #form_save #image-buttons div { color: #006666; cursor: pointer; text-transform: uppercase; display: inline-block; width: 48%; padding: 10px 5px; box-sizing: border-box; font-size: 20px; font-family: arial; color: #fff; }
.work-zone #form_save #image-buttons #change-photo-button { background-color: #ff7373; }
.work-zone #form_save #image-buttons #create-image-button { background-color: #77b67e; }

/****** upload dialog  ******/

#upload-body-wrapper { position: fixed; z-index: 5000; top: 0; left: 0; background-color: rgba( 95, 95, 95, 0.5 ); width: 100%; height: 100%; display: none; box-sizing: border-box; }
//#upload-body-wrapper #upload-wrapper { width: 600px; height: 240px; display: block; text-align: left; margin: 150px auto; background-color: #e7e7e7; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding-top: 25px; -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); overflow: hidden; }
#upload-body-wrapper #upload-wrapper { width: 600px; min-height: 240px; display: block; text-align: left; margin: 150px auto; background-color: #fff; padding: 5px 0px 10px 0px; -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); overflow: hidden; text-align: right; }

#upload-wrapper #upload-wrapper-close-button { margin: -20px 8px 0 0; font-size: 14px; color: #006666; cursor: pointer; font-weight: bold; display: inline-block; }
#upload-wrapper #upload-wrapper-close-button:hover { text-shadow: 1px 0px 10px rgba(0, 102, 102, 1); }
#upload-wrapper #delete-all-photos { margin: 0px 10px 0px; font-size: 12px; color: #006666; display: inline-block; cursor: pointer; line-height: 16px; background: url('/img/design/upload-tabs-icons/icon-delete-photos.png') left center no-repeat; padding-left: 20px; display: none; }

#upload-wrapper .upload-tab { font-size: 10pt; float: left;  height: 60px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-position: 50% 15px; background-repeat: no-repeat; width: 33.3%; padding-top: 35px; box-sizing: border-box; }
#upload-wrapper .tab-active { color: #006666; background-color: #ffffff; border-top: 1px solid #669999; }
#upload-wrapper .tab-inactive { color: #fff; background-color: #669999; cursor: pointer; border-right: 1px solid #e7e7e7; }
#upload-wrapper #tab-photos { background-image: url('/img/design/upload-tabs-icons/icon-tab-photos-active.png'); } 
#upload-wrapper #tab-file { background-image: url('/img/design/upload-tabs-icons/icon-tab-file-inactive.png'); } 
#upload-wrapper #tab-url { background-image: url('/img/design/upload-tabs-icons/icon-tab-url-inactive.png'); } 

#upload-wrapper #upload-body { width: 100%; padding: 0px; margin: 0px auto; height: 100%; background-color: #ffffff; text-align: center; }

.photo-upload label#upload-button-label input[type="file"] { position: fixed; top: -1000px; }
.photo-upload #upload-button-label { display: inline-block; color: #fff; font-family: verdana; font-size: 20px; text-align: center; cursor: pointer; background-color: #006666; -webkit-border-radius: 4px;  -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #006666; font-size: 14pt; height: 45px; line-height:45px; width:200px;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.photo-upload #upload-button-label:hover { background-color:#669999; }

#upload-wrapper #upload-note { color: #666; font-size: 8pt; margin-top: 15px; }
#upload-wrapper #upload-note img { width: 340px; height: 42px; }

#upload-body .photos-zone { margin-top: 0px; text-align: center; }
#upload-body .photos-zone #uploaded-photos-msg { height: 16px; text-align: center; display: none; margin: 40px auto; background: url('/img/design/icon-ok.png') no-repeat left 50%; padding-left: 25px; }
#upload-body .photos-zone #upload-photos-loader { width: 100%; background: url('/img/design/preloader.gif') no-repeat center; display: none; padding-top: 80px; background-color: #ffffff; height: 32px; }

#upload-body .photos-zone #uploaded-photos { margin: 15px 0px 10px 15px; }
#upload-body .photos-zone #uploaded-photos div { margin: 0; color: #006666; }
#upload-body .photos-zone #uploaded-photos #uploaded { display: inline; }
#upload-body .photos-zone #uploaded-photos #img-preview-list { width: 100%; text-align: left; margin: 0px 0 10px 0; }
#upload-body .photos-zone #uploaded-photos #img-preview-list .img-preview-list-item { margin: 3px; border: 1px solid #669999; padding: 1px; width: 120px; height: 120px; float: left; }
#upload-body .photos-zone #uploaded-photos #img-preview-list .img-preview-list-item div { width: 120px; height: 120px; cursor:pointer; }

#upload-body form { padding: 0; margin: 0; }
#upload-body .file-zone { padding: 0px; display: inline-block; margin-top: 50px; }
#upload-body .file-zone-with-photos { margin-top: 10px; padding: 15px 0px 0px 0px; }
#upload-body .url-zone { padding: 20px 0 0 50px; }
#upload-body .url-zone #upload_url { border: 1px solid #006666; width: 60%; height: 20px; padding-left: 3px; padding-top: 3px; padding-right: 6px; vertical-align: top; }
#upload-body .url-zone #do_upload_url { background: #006666; height: 25px; width: 106px; text-align: center; color: #fff; font-size: 10pt; padding-top: -20px; cursor: pointer; border: none; }

/******** progress bar *********/

#progress-wrapper { height: 15px; display: none; padding: 30px 0px; font-size: 12px; text-align: center; width: 98%; margin: 0 auto;}
#progress-wrapper #progressbar { width: 100%; display: inline-block; margin-top: 5px; height: 10px; }
#progress-wrapper #progress { margin-left: 10px; display: inline; }

@media screen and (max-width: 1280px){

}
@media screen and (max-width: 1024px){
	#ad-block-300x600 { display: none; }
	.content-body { margin: 10px 0px 0px 10px; }
	.effector-header { font-size: 30px; left: 10px; top: -70px; }
	.content-body .template-wrapper { }
	.template-wrapper .template-info { width: 350px; }
	.template-wrapper .template-info .ads-3 { width: auto; max-height: 90px; margin: 15px 0 15px 0; }
}

@media screen and (max-width: 720px){
	.effector-header { font-size: 25px; left: 15px; top: -55px; }
	#upload-body-wrapper #upload-wrapper { width: 480px; min-height: 360px; margin: 80px auto; }
	.work-zone #form_save #image-buttons { font-size: 12px; }
	.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper img { width: 160px; height: 160px; }
}

@media screen and (max-width: 480px){
	.header-wrapper .top-menu-wrapper .top-menu-bg-img { height: 100px; width: 720px;}
	.effector-header { font-size: 16px; left: 10px; top: -85px; }
	.content-body { text-align: center;  margin: 0 auto 30px auto; width: 100%; }
//	.content-body .ads { height: auto; }
//	.content-body .ads .ads-2 { height: 170px; }
	.content-body #content-preloader { display: block; margin: 0px auto; }
	.content-body .template-wrapper { width: 100%; text-align: center; padding: 0; visibility: hidden; }
	.template-wrapper .template-info #choose-photo-button { box-sizing: border-box; width: 96%; border: 0px; background: #006666; color: #fff; border-radius: 2px; padding: 15px 0 15px 0px; margin: 0px auto; }
	.template-wrapper .template-info { width: 100%; display: block; margin: 0 auto; text-align: center; }
	.template-wrapper #template-image { display: block; vertical-align: top; margin: 0 auto; width: 100%; height: auto; }
	.template-wrapper #template-image #template-image-preview { display: none; }
	.template-wrapper #template-image #template-image-preview-max { display: block; width: 100%; height: auto; }
	.template-wrapper .template-info h1 { margin: 10px auto 15px auto; padding: 0 5px 0 5px; }
	.template-wrapper .template-info p { text-align: left; margin: 15px auto 15px auto; width: 80%; }
	.template-wrapper .rand-effects-wrapper { margin-top: 0px; }
	.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper img { width: 220px; height: 220px; }
	.template-wrapper .rand-effects-wrapper #rand-effects-row-2 { display: none; }
	.template-wrapper .rand-effects-wrapper #rand-effect-5 { display: none; }

	#upload-body-wrapper #upload-wrapper { width: 360px; }
	#upload-body .file-zone { padding: 0; width: 99%; }
	.photo-upload #upload-button-label { width: 100%; border-radius: 2px; border: 0px; }
	#upload-body .url-zone { padding: 20px 0 0 20px; }
	#progress-wrapper { text-align: center; width: 80%; margin: 0 auto; padding: 40px 0; }
	#progress-wrapper #progressbar { width: 100%; }
	#upload-body-wrapper #upload-wrapper { margin: 50px auto; }

	.template-wrapper .template-info .ads-3 { width: 100%; max-height: none; height: auto; margin: 25px 0 15px 0; overflow: visible; position: initial; }
	.arrow-wrapper { display: block; width: 100%; height: 34px; position: relative; margin: 35px 0 20px 0; }
	.arrow-wrapper .arrow { position: absolute; top: 0px; text-align: center; background-color: #006666; cursor: pointer; color: #ffffff; font-size: 15px;  font-family: verdana; transform: scaleY(2); box-sizing: border-box; height: 100%; width: 50%; border: 2px solid #fff; }
	.arrow-wrapper .arrow-inactive { position: absolute; top: 0px; text-align: center; background-color: #afafaf; cursor: pointer; color: #ffffff; font-size: 15px;  font-family: verdana; transform: scaleY(2); box-sizing: border-box; height: 100%; width: 50%; border: 2px solid #fff; }
	.arrow-wrapper #arrow-left { left: 0; padding: 5px 0 5px 0; left: 1px; }
	.arrow-wrapper #arrow-right { right: 0; padding: 5px 0 5px 0; right: 1px; }
	.arrow-wrapper .arrow:hover { background-color: #1e8e8e; }
	.arrow-wrapper .arrow-inactive:hover { background-color: #afafaf; }
	.arrow-wrapper .effects-counter { display: none; }
}

@media screen and (max-width: 414px){
	.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper img { width: 190px; height: 190px; }
}
@media screen and (max-width: 375px){
	.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper img { width: 172px; height: 172px; }
	#upload-body .photos-zone #uploaded-photos-msg { padding-left: 15px; width: 60%; }
}
@media screen and (max-width: 360px){
	#upload-body-wrapper #upload-wrapper { width: 340px; min-height: 360px; }
	#upload-wrapper #upload-note img { width: 300px; height: 37px; }
	.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper img { width: 168px; height: 168px; }
}
@media screen and (max-width: 320px){
	#upload-body-wrapper #upload-wrapper { width: 300px; min-height: 380px; }
	#upload-body .url-zone #do_upload_url { width: 76px; }
	.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper img { width: 152px; height: 152px; }
	.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper { margin: 1px; }
	.template-wrapper .rand-effects-wrapper .rand-effects-title { padding-left: 12px; }
}
@media screen and (max-width: 240px){
	.header-wrapper .fb-like-button { top: 50px; left: 5px; z-index: 100; }
	#upload-body-wrapper #upload-wrapper { width: 240px; height: 240px; margin: 0px auto; }
	#upload-body .file-zone { padding: 20px 0 0 5px; }
	#upload-wrapper #upload-note img { width: 240px; height: 30px; }
	#upload-body .url-zone { padding: 20px 0 0 5px; }
	#upload-wrapper .upload-tab { font-size: 8pt; }
	#upload-body .photos-zone #uploaded-photos #img-preview-list .img-preview-list-item { width: 60px; height: 60px; }
	#upload-body .photos-zone #uploaded-photos #img-preview-list .img-preview-list-item div { width: 60px; height: 60px; }
	.msg-ok { font-size: 10px; }
	.msg-error { font-size: 10px; }
	.work-zone #form_save #image-buttons { font-size: 9px; }
	.template-wrapper .rand-effects-wrapper .rand-effects-row .rand-effect-wrapper img { width: 112px; height: 112px; }
}