@font-face {
 font-family:headingfont;
 src: url("ProximaNova-Regular_0.eot") /* EOT file for IE */
}
@font-face {
 font-family: headingfont;
 src: url("ProximaNova-Regular_0.otf") /* TTF file for CSS3 browsers */
}

@font-face {
 font-family:headingfontthin;
 src: url("Proxima Nova Thin_0.eot") /* EOT file for IE */
}

@font-face {
 font-family: headingfontthin;
 src: url("Proxima Nova Thin_0.otf") /* TTF file for CSS3 browsers */
}

@font-face {
    font-family: 'signpaintermedium';
    src: url('signpainter-housescript-webfont.woff2') format('woff2'),
         url('signpainter-housescript-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.global-mobile{ display:flex; align-items:flex-start; margin:0 auto; overflow:hidden; width:245px; overflow:hidden;  padding:2px 3px;    text-align:center; background-color: #75f8fc;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#75f8fc), to(#40aaf6));
background: -webkit-linear-gradient(top, #75f8fc, #40aaf6);
background: -moz-linear-gradient(top, #75f8fc, #40aaf6);
background: -ms-linear-gradient(top, #75f8fc, #40aaf6);
background: -o-linear-gradient(top, #75f8fc, #40aaf6);
}

.global-mobile .center{ padding:20px 5px; margin:0 auto; width:100%; height: 100%;}
.global-mobile .device-name{ width:auto; background:#fff; display:block; font-weight: bold; font-size:14px; color:#000; padding:10px 0px; display: block; bottom:-42px; position:absolute; width:100%; z-index:10; left:0px; right:0px;}


.global-mobile .title{ padding:10px 0px 20px; display:block; font-size:18px; word-wrap:break-word; line-height:20pt; width:auto; margin:0 auto; color:#fff;  }
.global-mobile .title1{ padding:10px 0px 20px; display:block; font-size:18px; word-wrap:break-word; line-height:20pt; display:none; width:auto; margin:0 auto; }
.global-mobile .image{ margin:0 auto; position:relative; display:inline-block; overflow:hidden;}
.global-mobile .image img{margin:0 auto; position:relative; z-index:1;}
.global-mobile .image1{ margin:0 auto; position:relative; display:inline-block; overflow:hidden;}
.global-mobile .image1 img{margin:0 auto; position:relative; z-index:1;}
.global-mobile .backimage { position: absolute; left: 0px; right: 0px; margin: 0 auto; top: 58px;  width: 201px; height: 351px; z-index: 0; overflow: hidden; background-position: center center!important; background-size: cover!important; background-color:#b3b3b3; display:flex; align-items:center;}
.global-mobile .backimage p { width: 100%; font-weight: bold; text-align: center; font-size: 32px; line-height: 43px; color: #fff;}

.global-mobile#iphone-750x1333 {width:210px; height:auto;}
.global-mobile#iphone-750x1333 .image img{ width:100%; height:auto;}
.global-mobile#iphone-750x1333 .backimage{ top:52px; height:312px; left:2px; width:190px;}
.global-mobile#iphone-750x1333 .backimage p{ font-size:25px; line-height:35pt;}

.global-mobile#iphone-640x1136 { width:190px; height:auto; }
.global-mobile#iphone-640x1136 .image img{ width:100%; height:auto;}
.global-mobile#iphone-640x1136 .backimage{ top:43px; height:285px; left:2px; width:173px;}
.global-mobile#iphone-640x1136 .backimage p{ font-size:20px; line-height:30pt;}


.global-mobile#iphone-640x960 { width:178px; height:auto; }
.global-mobile#iphone-640x960 .image img{ width:100%; height:auto;}
.global-mobile#iphone-640x960 .backimage{ top:43px; height:263px; left:2px; width:165px;}
.global-mobile#iphone-640x960 .backimage p{ font-size:15px; line-height:19pt;}


/* .global-mobile#iphone-1125x2436 { width:255px; height:auto; }
.global-mobile#iphone-1125x2436 .image img{ width:100%; height:auto;}
.global-mobile#iphone-1125x2436 .backimage{ top:43px; height:263px; left:2px; width:165px;}
.global-mobile#iphone-1125x2436 .backimage p{ font-size:15px; line-height:19pt;} */


.global-mobile#android-800x1280 .image img{ width:235px; height:auto;}
.global-mobile#android-800x1280 .backimage{ top:59px; height:407px; left:2px; width:205px;}
.global-mobile#android-800x1280 .backimage p{ font-size:25px; line-height:35pt;}



.global-mobile#android-450x800{width:200px;}
.global-mobile#android-450x800 .image img{ width:160px; height:auto;}
.global-mobile#android-450x800 .backimage{ top: 40px; height: 251px; left: 1px; width: 142px;}
.global-mobile#android-450x800 .backimage p{ font-size:25px; line-height:35pt;}

.global-mobile.iphonexmobile .backimage{ top: 15px; height: 435px;}
.global-mobile.iphonexmobile{background-size:cover !important;}


.global-mobile#iphone-1125x2436 .backimage{    top: 60px;
    height: 377px;
    width: 210px;
    left: 2px;}
.global-mobile#iphone-1125x2436{background-size:cover !important;}
.global-mobile#iphone-1125x2436 .image img{ width:240px; height:auto;}


.global-mobile.iphonexmobile#iphone-750x1333 .backimage { top: 16px;height: 380px;}
.global-mobile.iphonexmobile#iphone-640x1136 .backimage { top: 13px; height: 345px;width: 163px;}
.global-mobile.iphonexmobile#iphone-640x960 .backimage {top: 12px; height: 322px; left: 2px; width: 155px;}


.canvas1{width:245px; height:528px;}
.canvas1 canvas{ width:100%; height:auto !important;}
.canvas2{width:216px; height:473px;}
 .canvas2 canvas{ width:100%; height:auto !important;}
 .canvas3{width:200px; height:443px;}
 .canvas3 canvas{ width:100%; height:auto !important;}
 .canvas4{width:193px; height:428px;}
 .canvas4 canvas{ width:100%; height:auto !important;}

 .err_msg{text-align: center;}
 .succ_msg{text-align: center;}

 .fieldError {
	color: red;
	padding-bottom: 5px;
	clear:both;
}

.global-mobile.caption-above{ align-items:flex-start; background-size:cover !important }
.global-mobile.caption-below{ align-items:flex-end;}
.global-mobile.caption-above .image{ -webkit-transform:rotate(0deg); }
.global-mobile.caption-above .title{ display:block!important;}
.global-mobile.caption-above .title1{ display:none!important;}

.global-mobile.caption-below .image{ -webkit-transform:rotate(0deg);}
.global-mobile.caption-below .title{ display:none!important;}
.global-mobile.caption-below .title1{ display:block!important;}

.global-mobile.full-device .title{ display:none;}
.global-mobile.full-device .title1{ display:none;}

.global-mobile.screenshot-only .image img{ display:none;}
.global-mobile.screenshot-only .backimage{ position:static; left:0px; top:0px;}
.global-mobile.screenshot-only.screenshot-only caption-below .backimage{ top:auto; bottom:0px;}


.global-mobile.rotate1 .image{  -webkit-transform:translate(140px,0px) rotate(30deg);}
.global-mobile.rotate2 .image{  -webkit-transform:translate(-60px,0px) rotate(30deg);}
.global-mobile.rotate2 .title{ display:none;}
.global-mobile.rotate2 .title1{ display:none;}

.global-mobile.rotate-above .image{  -webkit-transform:translate(-60px,0px) rotate(30deg);}
.global-mobile.rotate-above .title{ display:block;}
.global-mobile.rotate-above .title1{ display:none;}

.global-mobile.rotate-below .image{  -webkit-transform:translate(-60px,0px) rotate(30deg);}
.global-mobile.rotate-below .title{ display:none;}
.global-mobile.rotate-below .title1{ display:block;}

.global-mobile.fullrotate .image{  -webkit-transform:rotate(30deg); }
.global-mobile.fullrotate .title{ display:none;}
.global-mobile.fullrotate .title1{ display:none;}

.global-mobile.fullrotate-above .image{  -webkit-transform:rotate(30deg);}
.global-mobile.fullrotate-above .title{ display:block;}
.global-mobile.fullrotate-above .title1{ display:none;}

.global-mobile.fullrotate-below .image{  -webkit-transform:rotate(30deg);}
.global-mobile.fullrotate-below .title{ display:none;}
.global-mobile.fullrotate-below .title1{ display:block;}




.screenback{ width:auto; overflow:hidden; background:#fff; padding:100px 0px; font-family:Raleway;}
.screenback .tabing{ width:auto;}
.screenback .tabing ul{ width:auto; text-align:center; font-size:0px;}
.screenback .tabing ul li{ display:inline-block; }
.screenback .tabing ul li a{ display:block; padding:10px 20px; color:#4e5a65; font-size:19px; border-bottom:3px #f3f4f7 solid;}
.screenback .tabing ul li a:hover{ border-bottom:3px #2fc1ff solid;}
.screenback .tabing ul li a.active{ border-bottom:3px #2fc1ff solid;}
.screenback .describe{width:auto; margin: 25px 0 25px 0px; display:block; padding: 20px 0px 0px;}
.screenback .describe p{color:#636363; font-size:22px; text-align:center; font-family:headingfontthin; padding:10px;}
.screenback .screentitle{ width:auto; margin:0px 0 20px 0px;}
.screenback .screentitle .text{ border:0px; padding:0px; width:400px; text-align:center; font-size:30px; color:#636363; font-style:italic; text-decoration:underline; font-family:headingfont; height:31px;}

.screenslidebox{ width:auto; margin:0 auto; overflow:hidden;}

.screenslidebox .text{ width:auto; text-align:center; padding:15px 0px; margin:0px 0px 50px 0px;}
.screenslidebox .text h3{ width:auto; color:#636363; font-size:35px; text-align:center; font-weight:normal; padding:20px 0px;}
.screenslidebox .text p{ width:auto; color:#b1abab; text-align:center; font-size:18px;}

.screenslidebox .selectplatform ul{ width:auto; text-align:center;}
.screenslidebox .selectplatform ul li{  display:inline-block; text-align:center; box-shadow:0px 0px 20px #eceaea; border:1px #eceaea solid; padding:50px; margin:0px 20px; -webkit-transition:all 1s; -moz-transition:all 1s; cursor:pointer; cursor:pointer;}
.screenslidebox .selectplatform ul li .img{ min-height:220px;}
.screenslidebox .selectplatform ul li .img img{ margin:0 auto;}
.screenslidebox .selectplatform ul li p{ color:#636363; font-size:30px; text-align:center; padding:25px 0px;}
.screenslidebox .selectplatform ul li.active{ border:1px #2fc1ff solid; box-shadow:0px 0px 20px #bce4f5; -webkit-transition:all 1s; -moz-transition:all 1s;}

.screenslidebox .selecttemplate{ width:1170px; margin:0px auto;}
.screenslidebox .selecttemplate ul{ text-align:center;}
.screenslidebox .selecttemplate ul li{ display:inline-block; margin:5px 0 42px 0px; position:relative; cursor:pointer; vertical-align:top;}
.screenslidebox .selecttemplate ul li .global-mobile{ width:245px; height:485px;}
.screenslidebox .selecttemplate img{ margin:0 auto; }
.screenslidebox .selecttemplate ul li span{ position:absolute; left:0px; right:0px; margin:0 auto; width:82px; height:82px; background:url(images/check.png) center top; opacity:0; top:40%; -webkit-transition:all 1s; -moz-transition:all 1s; z-index:20;}
.screenslidebox .selecttemplate ul li.active span{ opacity:1;}
.screenslidebox .selecttemplate ul li strong{ padding:15px 0px; display:block;}




.screenslidebox .devicetemplate{ width:1170px; margin:0px auto 0 auto}
.screenslidebox .devicetemplate ul{ text-align:center;}
.screenslidebox .devicetemplate ul li{ display:inline-block; margin:10px; position:relative; cursor:pointer;  box-sizing:border-box;}
.screenslidebox .devicetemplate ul li .image1{ width:auto;  padding:10px; /*background:#b7e3f8;*/

background-color: #75f8fc;
  background-repeat: repeat-x;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#75f8fc), to(#40aaf6));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #75f8fc, #40aaf6);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #75f8fc, #40aaf6);
  /* IE 10 */
  background: -ms-linear-gradient(top, #75f8fc, #40aaf6);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #75f8fc, #40aaf6);
}




.screenslidebox .devicetemplate ul li .image1 img{ width:225px; height:465px;}
.screenslidebox .devicetemplate ul li span{ position:absolute; left:0px; right:0px; margin:0 auto; width:82px; height:82px; background:url(images/check.png) center top; opacity:0; top:40%; -webkit-transition:all 1s; -moz-transition:all 1s; z-index:20;}
.screenslidebox .devicetemplate ul li.active span{ opacity:1;}
.screenslidebox .devicetemplate ul li strong{ font-weight:bold; font-size:20px; color:#000; padding:10px 0 0px; display:block;}



.selecttemplate .combo{ width:auto; margin:0 0 40px 0px;}
.selecttemplate .combo select{ padding:10px; width:300px; margin:0 auto; }

.screenback .uploadfilewrapper{ width:auto;}
.screenback .uploadfile{ width:auto;}
.screenback .uploadfile .dragbox{ width:250px; height:250px; background:#fafafa; border:3px #dadada dashed; margin:0 auto; display:flex; align-items:center;}
.screenback .uploadfile p{ text-align:center; margin:20px auto; position:relative;}
.screenback .uploadfile p a{ background:#81c548; border:1px #72b935 solid; text-align:center; display:inline-block; padding:10px 20px; border-radius:6px; color:#fff; font-size:16px;}
.screenback .uploadfile p .file{ position:absolute; left:0px; right:0px; margin:0 auto; width:120px; height:40px; opacity:0;}
.screenback .bar{ width:700px; text-align:center; margin:0 auto;}
.screenback .bar .progress{ width:100%; display:inline-block; background:#fafafa; height:5px; position:relative;}
.screenback .bar .progress ul{ float:left; background:#2fc1ff; height:100%;}
.screenback .bar .progress span{ position:absolute; right:0px; top:-30px; color:#2fc1ff;  display:block; font-weight:bold; font-size:20px;}
.screenback .bar .image{ width:19%; display:inline-block; }
.screenback .bar .cancel{width:19%;display:none;}


.screenback .size-selection{ width:auto; margin:100px 0px; padding:0px;}
.screenback .size-selection.my-image{ margin:50px 0px;}
.screenback .size-selection ul{ width:auto; text-align:center;}
.screenback .size-selection ul li{ display:inline-block; margin:0px 10px; vertical-align:top; text-align:center;}
.screenback .size-selection ul li .mobiles{ text-align:center; position:relative; }
.screenback .size-selection ul li .mobiles img{ margin:0 auto; position:relative; z-index:2;}
.screenback .size-selection ul li strong{ display:block; font-weight:bold; padding:10px 0px; font-size:20px;}
.screenback .size-selection ul li strong small{ display:block; font-weight:normal; font-size:15px;}
.screenback .size-selection ul li .mobiles .backimage{ position:absolute; left:0px; right:0px; margin:0 auto; top:10px; width:90%; height:90%; z-index:1; overflow:hidden; background-position:center center; background-size:cover;}


.screenback .edit-tab{ width:auto; text-align:center; margin:40px 0px;}
.screenback .edit-tab a{ display:inline-block; background:#f7f5f5; color:#2fc1ff; padding:8px 25px; font-size:18px; border-radius:4px; margin:0px 5px; }
.screenback .edit-tab a.active{ background:#2fc1ff; color:#fff;}

.screenback .font-box{ width:auto;}
.screenback .font-box ul{ width:auto; text-align:center;}
.screenback .font-box ul li{ display:inline-block; margin:0px 3px; vertical-align:top;}
.screenback .font-box ul li .input{ padding:10px; border:1px #CCCCCC solid; width:90px; box-sizing:border-box; height:40px;}
.screenback .font-box ul li .input.large{ width:200px;}
.screenback .font-box ul li label{ display:block; text-align:left; margin:0 0 5px 0px; font-size:16px;}
.screenback .font-box ul li a{ display:inline-block; background:#2fc1ff; padding:6px 30px; color:#fff; font-size:15px; position:relative; }
.screenback .font-box ul li a .hidden{ position:absolute; left:0px; top:0px; opacity:0; width:100%; height:100%;}

.screenback .background-color{ width:700px; margin:30px auto;}
.screenback .background-color ul{ width:auto; text-align:center; display:none;}
.screenback .background-color ul li{ width:40px; height:40px; display:inline-block; margin:3px; border:2px #fff solid; outline:1px #CCCCCC solid; padding:4px;}
.screenback .background-color ul #wrapeme{width:40px; height:40px; display:inline-block; margin:3px; border:2px #fff solid; outline:1px #CCCCCC solid; padding:4px;}
.screenback .background-color ul #wrapeme #colorSelector #colorSelectorText #colorSelectorBack{ margin: -16px 0 0 2px;}
.screenback .background-color ul li img{ width:100%; height:100%;}

.color1 {
    background: #7dcbc9;
    background: -webkit-linear-gradient(#7dcbc9, #ebb180);
    background: -o-linear-gradient(#7dcbc9, #ebb180);
    background: -moz-linear-gradient(#7dcbc9, #ebb180);
    background: linear-gradient(#7dcbc9, #ebb180);
}

.color2 {
    background: #e25d8a;
    background: -webkit-linear-gradient(#e25d8a, #f3a97b);
    background: -o-linear-gradient(#e25d8a, #f3a97b);
    background: -moz-linear-gradient(#e25d8a, #f3a97b);
    background: linear-gradient(#e25d8a, #f3a97b);
}

.color3 {
    background: #c34ca6;
    background: -webkit-linear-gradient(#c34ca6, #dc9988);
    background: -o-linear-gradient(#c34ca6, #dc9988);
    background: -moz-linear-gradient(#c34ca6, #dc9988);
    background: linear-gradient(#c34ca6, #dc9988);
}


.color4 {
    background: #7e3780;
    background: -webkit-linear-gradient(#7e3780, #ecc3a0);
    background: -o-linear-gradient(#7e3780, #ecc3a0);
    background: -moz-linear-gradient(#7e3780, #ecc3a0);
    background: linear-gradient(#7e3780, #ecc3a0);
}

.color5 {
    background: #49327d;
    background: -webkit-linear-gradient(#49327d, #478a87);
    background: -o-linear-gradient(#49327d, #478a87);
    background: -moz-linear-gradient(#49327d, #478a87);
    background: linear-gradient(#49327d, #478a87);
}

.color6 {
    background: #27456b;
    background: -webkit-linear-gradient(#27456b, #48a4c7);
    background: -o-linear-gradient(#27456b, #48a4c7);
    background: -moz-linear-gradient(#27456b, #48a4c7);
    background: linear-gradient(#27456b, #48a4c7);
}

.color7 {
    background: #2c557a;
    background: -webkit-linear-gradient(#2c557a, #c2b193);
    background: -o-linear-gradient(#2c557a, #c2b193);
    background: -moz-linear-gradient(#2c557a, #c2b193);
    background: linear-gradient(#2c557a, #c2b193);
}

.color8 {
    background: #c73c30;
    background: -webkit-linear-gradient(#c73c30, #dea479);
    background: -o-linear-gradient(#c73c30, #dea479);
    background: -moz-linear-gradient(#c73c30, #dea479);
    background: linear-gradient(#c73c30, #dea479);
}

.color9 {
    background: #eec385;
    background: -webkit-linear-gradient(#eec385, #fcf5df);
    background: -o-linear-gradient(#eec385, #fcf5df);
    background: -moz-linear-gradient(#eec385, #fcf5df);
    background: linear-gradient(#eec385, #fcf5df);
}

.color10 {
    background: #e76a71;
    background: -webkit-linear-gradient(#e76a71, #fdf2e5);
    background: -o-linear-gradient(#e76a71, #fdf2e5);
    background: -moz-linear-gradient(#e76a71, #fdf2e5);
    background: linear-gradient(#e76a71, #fdf2e5);
}

.color11 {
    background: #a0588d;
    background: -webkit-linear-gradient(#a0588d, #eec4f7);
    background: -o-linear-gradient(#a0588d, #eec4f7);
    background: -moz-linear-gradient(#a0588d, #eec4f7);
    background: linear-gradient(#a0588d, #eec4f7);
}

.color12 {
    background: #9c5388;
    background: -webkit-linear-gradient(#9c5388, #ecc1f4);
    background: -o-linear-gradient(#9c5388, #ecc1f4);
    background: -moz-linear-gradient(#9c5388, #ecc1f4);
    background: linear-gradient(#9c5388, #ecc1f4);
}

.color13 {
    background: #a33371;
    background: -webkit-linear-gradient(#a33371, #6a2362);
    background: -o-linear-gradient(#a33371, #6a2362);
    background: -moz-linear-gradient(#a33371, #6a2362);
    background: linear-gradient(#a33371, #6a2362);
}

.color14 {
    background: #519bc2;
    background: -webkit-linear-gradient(#519bc2, #642967);
    background: -o-linear-gradient(#519bc2, #642967);
    background: -moz-linear-gradient(#519bc2, #642967);
    background: linear-gradient(#519bc2, #642967);
}

.color15 {
    background: #d975be;
    background: -webkit-linear-gradient(#d975be, #8b9dcd);
    background: -o-linear-gradient(#d975be, #8b9dcd);
    background: -moz-linear-gradient(#d975be, #8b9dcd);
    background: linear-gradient(#d975be, #8b9dcd);
}

.color16 {
    background: #58b9d0;
    background: -webkit-linear-gradient(#58b9d0, #9edcde);
    background: -o-linear-gradient(#58b9d0, #9edcde);
    background: -moz-linear-gradient(#58b9d0, #9edcde);
    background: linear-gradient(#58b9d0, #9edcde);
}

.color17 {
    background: #b0e078;
    background: -webkit-linear-gradient(#b0e078, #aae1d0);
    background: -o-linear-gradient(#b0e078, #aae1d0);
    background: -moz-linear-gradient(#b0e078, #aae1d0);
    background: linear-gradient(#b0e078, #aae1d0);
}

.color18 {
    background: #a7db5c;
    background: -webkit-linear-gradient(#a7db5c, #68bc1d);
    background: -o-linear-gradient(#a7db5c, #68bc1d);
    background: -moz-linear-gradient(#a7db5c, #68bc1d);
    background: linear-gradient(#a7db5c, #68bc1d);
}

.color19 {
    background: #70be2b;
    background: -webkit-linear-gradient(#70be2b, #e3f2c9);
    background: -o-linear-gradient(#70be2b, #e3f2c9);
    background: -moz-linear-gradient(#70be2b, #e3f2c9);
    background: linear-gradient(#70be2b, #e3f2c9);
}

.color20 {
    background: #6cba20;
    background: -webkit-linear-gradient(#6cba20, #e7d193);
    background: -o-linear-gradient(#6cba20, #e7d193);
    background: -moz-linear-gradient(#6cba20, #e7d193);
    background: linear-gradient(#6cba20, #e7d193);
}

.color21 {
    background: #55be2c;
    background: -webkit-linear-gradient(#55be2c, #0bf6e3);
    background: -o-linear-gradient(#55be2c, #0bf6e3);
    background: -moz-linear-gradient(#55be2c, #0bf6e3);
    background: linear-gradient(#55be2c, #0bf6e3);
}

.screenback .edit-device{ text-align:center; margin:0px 0px;}
.screenback .editbox { width:auto; margin:-30px 0 40px 0px;}
.screenback .editbox .editpanel{ width:auto; display:none;}
.screenback .control{ width:auto; margin:40px 0 0 0px;}
.screenback .control a{display: inline-block; margin: 0px 5px; padding: 8px 0px; background: #2fc1ff; color: #fff; border-radius: 20px; font-size: 16px; width: 178px;}
.screenback .control a img{ display:inline-block; vertical-align:top; margin:0px 8px 0px 0px;}
.screenback .control a.next{ background:#fbb03b;}
.screenback .control a.delete{ background:#d9534f;}


/*export start*/
.export{ width:auto; text-align:center;}
.export h3{ font-size:60px; color:#66be69; font-weight:bold; padding:40px 0px;}
.export p{ text-align:center; font-size:20px; padding:5px 0px; text-align:center;}
.export p #button{ display:inline-block; padding:10px 40px; background:#66be69; color:#FFFFFF; font-size:18px; border-radius:6px; margin:20px 0 0 0px; border:0px;}
.export p a{  margin:0 auto; padding:7px 40px; background:#66be69; color:#FFFFFF; font-size:18px; border-radius:6px; margin:20px 0 0 0px; border:0px;}
/*export close*/

/*upload file start*/
				.box.has-advanced-upload
				{
					outline: 2px dashed #92b0b3;
					outline-offset: -10px;
					-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
					transition: outline-offset .15s ease-in-out, background-color .15s linear;
				}
				.box.is-dragover
				{
					outline-offset: -20px;
					outline-color: #c8dadf;
					background-color: #fff;
				}
				.box__dragndrop,
				.box__icon
				{
					display: none;
				}
				.box.has-advanced-upload .box__dragndrop
				{
					display: inline;
				}
				.box.has-advanced-upload .box__icon
				{
					width: 100%;
					height: 80px;
					fill: #92b0b3;
					display: block;
					margin-bottom: 40px;
				}

				.box.is-uploading .box__input,
				.box.is-success .box__input,
				.box.is-error .box__input
				{
					visibility: hidden;
				}

				.box__uploading,
				.box__success,
				.box__error
				{
					display: none;
				}
				.box.is-uploading .box__uploading,
				.box.is-success .box__success,
				.box.is-error .box__error
				{
					display: block;
					position: absolute;
					top: 50%;
					right: 0;
					left: 0;
					-webkit-transform: translateY( -50% );
					transform: translateY( -50% );
				}
				.box__uploading
				{
					font-style: italic;
				}
				.box__success
				{
					-webkit-animation: appear-from-inside .25s ease-in-out;
					animation: appear-from-inside .25s ease-in-out;
				}
					@-webkit-keyframes appear-from-inside
					{
						from	{ -webkit-transform: translateY( -50% ) scale( 0 ); }
						75%		{ -webkit-transform: translateY( -50% ) scale( 1.1 ); }
						to		{ -webkit-transform: translateY( -50% ) scale( 1 ); }
					}
					@keyframes appear-from-inside
					{
						from	{ transform: translateY( -50% ) scale( 0 ); }
						75%		{ transform: translateY( -50% ) scale( 1.1 ); }
						to		{ transform: translateY( -50% ) scale( 1 ); }
					}

				.box__restart
				{
					font-weight: 700;
				}
				.box__restart:focus,
				.box__restart:hover
				{
					color: #39bfd3;
				}

				.js .box__file
				{
					width: 0.1px;
					height: 0.1px;
					opacity: 0;
					overflow: hidden;
					position: absolute;
					z-index: -1;
				}
				.js .box__file + label
				{
					max-width: 80%;
					text-overflow: ellipsis;
					white-space: nowrap;
					cursor: pointer;
					display: inline-block;
					overflow: hidden;
				}
				.js .box__file + label:hover strong,
				.box__file:focus + label strong,
				.box__file.has-focus + label strong
				{
					color: #39bfd3;
				}
				.js .box__file:focus + label,
				.js .box__file.has-focus + label
				{
					outline: 1px dotted #000;
					outline: -webkit-focus-ring-color auto 5px;
				}
					.js .box__file + label *
					{
						/* pointer-events: none; */ /* in case of FastClick lib use */
					}

				.no-js .box__file + label
				{
					display: none;
				}

				.no-js .box__button
				{
					display: block;
				}
				.box__button
				{
					font-weight: 700;
					color: #e5edf1;
					background-color: #39bfd3;
					display: none;
					padding: 8px 16px;
					margin: 40px auto 0;
				}
					.box__button:hover,
					.box__button:focus
					{
						background-color: #0f3c4b;
					}

/*upload file close*/


.header-banner{ background:#44beee; height:100%;}
.header-banner .slidepanel{ width:1170px; height:100%; display:flex; align-items:stretch; margin:0 auto;}
.header-banner .slidepanel .row-box{ width:100%; height:100%;}
.header-banner .slidepanel .row-box .box1{ width:50%; float:left; display:flex; align-items:center; border-right:1px #ace2f7 solid; height:100%; box-sizing:border-box; text-align:center;}
.header-banner .slidepanel .row-box .box1 p{ color:#fff; font-size:40px; line-height:40pt; font-weight:300; width:100%; text-align:center; font-family: 'Raleway', sans-serif;}
.header-banner .slidepanel .row-box .box1 p span{ display:block; text-align:center; margin:30px 0px 0px;}
.header-banner .slidepanel .row-box .box1 p span a{ display:inline-block; background:#fff; color:#44beee; padding:10px 30px; font-size:20px; border-radius:6px; font-weight:bold;}
.header-banner .slidepanel .row-box .box1:last-child{ border:0px;}



.image-selection{ width:auto;}
.image-selection label{ display:inline-block; font-size:20px; margin:0 10px 10px 0px;}
.image-selection .select{ padding:10px; width:300px;}




/*my-canvas start*/


#iphone-1125x2436.whilecanvas {width:1125px!important; height:2436px !important; box-sizing:border-box; font-size:4em;}
#iphone-1125x2436.whilecanvas .image{ width:100%;}
#iphone-1125x2436.whilecanvas.screenshot-only .image{height: 80%;}
/* #iphone-1242x2208.whilecanvas .title {    padding: 100px 0px 100px 0px;
    display: block;
    font-size: 87px;
    line-height: 22pt;
    height: auto;
    width: 23%;
	transform: scale(4.2); -wenkit-transform: scale(4.2); }   */
#iphone-1125x2436.whilecanvas .title {   padding: 0.63em 0.5em;
    display: block;
    font-size: 1.4em;
    word-wrap: break-word;
    line-height: 1.8em;}  	
#iphone-1125x2436.whilecanvas .image img{ width:82%!important; height:auto!important;}
#iphone-1125x2436.whilecanvas .backimage{   width: 73%!important; height: 76%!important; top: 232px;  margin: 0 auto;} 
#iphone-1125x2436.iphonexmobile.whilecanvas .backimage {
    width: 65%!important;
    height: 95%!important;
	top: 70px;}


#iphone-1242x2208.whilecanvas {width:1242px!important; height:2208px!important; box-sizing:border-box; font-size:4em;}
#iphone-1242x2208.whilecanvas .image{ width:100%;}
#iphone-1242x2208.whilecanvas.screenshot-only .image{height: 80%;}
/* #iphone-1242x2208.whilecanvas .title {    padding: 100px 0px 100px 0px;
    display: block;
    font-size: 87px;
    line-height: 22pt;
    height: auto;
    width: 23%;
	transform: scale(4.2); -wenkit-transform: scale(4.2); }   */
#iphone-1242x2208.whilecanvas .title {   padding: 0.63em 0px;
    display: block;
    font-size: 1.6em;
    word-wrap: break-word;
    line-height: 1.8em;}  	
#iphone-1242x2208.whilecanvas .image img{ width:72%!important; height:auto!important;}
#iphone-1242x2208.whilecanvas .backimage{ width:69%!important; height:77%!important; top:230px; margin:0 auto;}
#iphone-1242x2208.iphonexmobile.whilecanvas .backimage {
    width: 64%!important;
    height: 93%!important;
	top: 70px;}
	

#iphone-750x1333.whilecanvas {width:750px!important; height:1334px!important; box-sizing:border-box; font-size:2.7em;}

#iphone-750x1333.whilecanvas .image{ width:100%;}
#iphone-750x1333.screenshot-only.whilecanvas .image{height: 80%;}
/* #iphone-750x1333.whilecanvas .title {     padding: 70px 0px 80px 0px;
    display: block;
    font-size: 55px;
    line-height: 23pt;
    height: auto;
    transform: scale(3); -webkit-transform: scale(3);
	width: 32%;} */
	#iphone-750x1333.whilecanvas .title {   padding: 0.63em 0px;
		display: block;
		font-size: 1.4em;
		word-wrap: break-word;
		line-height: 1.8em;}  
#iphone-750x1333.whilecanvas .image img{ width:70%!important; height:auto!important;}
#iphone-750x1333.whilecanvas .backimage{ width:68%!important; height:76%!important; margin:0 auto; top:135px;}
#iphone-750x1333.iphonexmobile.whilecanvas .backimage{    top: 38px;     width: 62%!important;   height: 93%!important;}


#iphone-640x1136.whilecanvas {width:640px!important; height:1136px!important; box-sizing:border-box; font-size:2.1em;}
/* #iphone-640x1136.whilecanvas .title {     padding: 70px 0px 80px 0px; font-size: 44px; line-height: 20pt; height: auto; transform: scale(3); -webkit-transform: scale(3); width: 30%;} */
#iphone-640x1136.whilecanvas .title {   padding: 0.63em 0px;
	display: block;
	font-size: 1.6em;
	word-wrap: break-word;
	line-height: 1.8em;}  
#iphone-640x1136.whilecanvas .image{ width:100%;}
#iphone-640x1136.whilecanvas.screenshot-only .image{height: 80%;}
#iphone-640x1136.whilecanvas .image img{ width:70%!important; height:auto!important;}
#iphone-640x1136.whilecanvas .backimage{ width:65%!important; height:76%!important; margin:0 auto; top:114px;}


#iphone-640x1136.iphonexmobile.whilecanvas .backimage {top: 32px; height: 93%!important;     width: 64%!important;}
#iphone-1125x2436.iphonexmobile.whilecanvas .image img {width: 190px; height: auto;}
#iphone-1125x2436.iphonexmobile.whilecanvas .backimage{top: 40px;height: 364px;width: 165px;}
#iphone-640x960.whilecanvas {width:640px!important; height:960px!important; box-sizing:border-box; font-size:1.6em;}
/* #iphone-640x960.whilecanvas .title {padding: 50px 0px 60px 0px; font-size: 44px; line-height: 20pt; height: auto; transform: scale(2.4); -webkit-transform: scale(2.4); width: 40%;} */
#iphone-640x960.whilecanvas .title  {   padding: 0.63em 0px;
	display: block;
	font-size: 1.6em;
	word-wrap: break-word;
	line-height: 1.6em;}  
#iphone-640x960.whilecanvas .image{ width:100%;}
#iphone-640x960.whilecanvas.screenshot-only .image{height: 80%;}
#iphone-640x960.whilecanvas .image img{ width:56%!important; height:auto!important;}
#iphone-640x960.whilecanvas .backimage{ width:49%!important; height:76%!important; margin:0 auto; top:90px;}

#iphone-640x960.iphonexmobile.whilecanvas .backimage {width: 49%!important; height: 93%!important; top: 27px}

#android-800x1280.whilecanvas{ width:800px!important;  font-size:2em}
/* #android-800x1280.whilecanvas .title { padding: 40px 0px 20px 0px; font-size: 46px; line-height: 24pt; height: 95px; transform: scale(2.4); -webkit-transform: scale(2.4); width: 35%;} */
#android-800x1280.whilecanvas .title  {   padding: 0.63em 0px;
	display: block;
	font-size: 1.6em;
	word-wrap: break-word;
	line-height: 1.8em;}  
#android-800x1280.fullrotate.whilecanvas .title{padding: 0.63em 0 1.5em;}
#android-800x1280.whilecanvas .image{ width:100%!important; }
#android-800x1280.whilecanvas .image img{ width:505px!important; height:auto!important;}
#android-800x1280.whilecanvas .backimage { width: 57%!important; height: 76%!important; margin: 0px auto; top: 132px;}

#android-450x800.whilecanvas{ width:450px!important; height:800px!important; box-sizing:border-box; font-size:1.2em}
/* #android-450x800.whilecanvas .title { padding:15px 0px 10px; font-size: 26px; line-height: 26pt; height: 85px; transform: scale(1.5); -webkit-transform: scale(1.5); width: 60%;} */
#android-450x800.whilecanvas .title {   padding: 0.63em 0px;
	display: block;
	font-size: 1.6em;
	word-wrap: break-word;
	line-height: 1.8em;}  
#android-450x800.fullrotate.whilecanvas .title{padding: 0.63em 0 1.5em;}
#android-450x800.whilecanvas .image{ width:100%!important; }
#android-450x800.whilecanvas .image img{ width:312px!important; height:auto!important;}
#android-450x800.whilecanvas .backimage {     width: 64% !important;
    height: 76%!important; top: 80px;}
/*my-canvas-close*/

/*myloader-start*/
.overlay{ width:100%; height:100%; position:fixed; display:flex; align-items:center; z-index:10; background:#fff;}
.overlay img{ margin:0 auto; text-align:center;}
/*myloader-close*/

/*contact start*/
.contact{ width:auto; height:100vh;background:-webkit-linear-gradient(141deg, #00f1f6 0%, #0099fd 80%);background:-o-linear-gradient(141deg, #00f1f6 0%, #0099fd 80%);background:-moz-linear-gradient(141deg, #00f1f6 0%, #0099fd 80%);overflow:hidden;}

.contact { width:auto; display:flex; align-items:center;}
.contact .middlebox{ text-align:center; display:inline-block; width:600px; margin:0 auto;}
.contact .middlebox h1{ display:inline-block; color:#fff; font-size:50px; position:relative; margin:0 0 40px 0px;}
.contact .middlebox h2{ display:block; color:#fff; font-size:50px; position:relative; margin:0 0 40px 0px;}
.contact .middlebox h1:before{ width:50px; height:3px; background:#fff; position:absolute; left:-80px; top:20px; content:'';}
.contact .middlebox h1:after{ width:50px; height:3px; background:#fff; position:absolute; right:-80px; top:20px; content:'';}
.contact .middlebox p{ color:#fff; font-size:20px; text-align:left; padding:20px 0px;}
.contact .middlebox p.center{ text-align:center;}
.contact .middlebox ul{ width:auto; display:block;}
.contact .middlebox ul li { display:block; margin:25px 0px; text-align:left;}
.contact .middlebox ul li .text{ width:100%; background:#fff; border:0px; padding:20px; box-sizing:border-box; color:#999999; font-size:20px;}
.contact .middlebox ul li .submit{ display:inline-block; border-radius:40px; background:#fff; border:0px; padding:10px 80px; font-size:30px; color:#999999; cursor:pointer;}

/*contact close*/
.iphonexcomingsoon{max-width:1065px; margin:auto;}
.iphonexcomingsoon img{width:100%}

.iphonexupload .global-mobile .backimage{top:15px; height:435px; width: 216px; border-radius: 27px;}
.iphonexupload .global-mobile#iphone-750x1333 .backimage{top: 13px;
    height: 387px;
    width: 182px; border-radius: 0;}
.iphonexupload .global-mobile#iphone-640x1136 .backimage { top: 12px; height: 350px; width: 163px; border-radius: 0px;}
.iphonexupload .global-mobile#iphone-640x960 .backimage { top: 11px; height: 325px; width: 156px; border-radius: 0px;}
.iphonexupload .global-mobile#iphone-1125x2436 .backimage{ width: 219px; top: 15px; height: 465px; left: 0; }

.iphonexupload .global-mobile#iphone-1125x2436.whilecanvas .backimage{ top: 65px;  width: 74%!important;  height: 94%!important;}

.iphonexupload .global-mobile.caption-above{background-size: cover !important; }

.iphonexupload #iphone-1242x2208.whilecanvas .backimage { width: 65%!important; height: 94%!important;	top: 58px;}
.iphonexupload #iphone-750x1333.whilecanvas .backimage{width: 63% !important;top: 34px;   height: 94% !important; }
.iphonexupload #iphone-640x1136.whilecanvas .backimage{top: 28px; width: 64%!important; height: 94%!important;}
.iphonexupload #iphone-640x960.whilecanvas .backimage{top: 23px; width: 51%!important; height: 94%!important;}


.androidupload .global-mobile .backimage{right: -1px; width: 196px; top:58px; height: 351px;}
.androidupload .global-mobile#android-800x1280 .backimage{ height: 367px;  top: 61px; }
.androidupload .global-mobile#android-800x1280.whilecanvas .backimage{    top: 129px;   }



/* Iphone XR CSS */
.iphonexrupload .global-mobile.caption-above{background-size: cover !important; }
.iphonexrupload .global-mobile#iphone-828x1792 .backimage{ height: 425px; top: 15px; width: 205px; border-radius: 20px;}
.iphonexrupload .global-mobile#iphoneoll-1242x2208 .backimage{top:15px; height:435px; width: 216px; border-radius: 27px;}
.iphonexrupload .global-mobile#iphone-1125x2436 .backimage{ width: 219px; border-radius: 27px; top: 15px; height: 465px; left: 0;}
.iphonexrupload .global-mobile#iphone-1242x2208 .backimage{top:15px; height:435px; width: 216px; border-radius: 27px;}
.iphonexrupload .global-mobile#iphone-750x1333 .backimage{top: 13px; height: 380px; width: 182px; border-radius: 15px;}
.iphonexrupload .global-mobile#iphone-640x1136 .backimage { top: 12px; height: 342px; width: 163px; border-radius: 10px;}
.iphonexrupload .global-mobile#iphone-640x960 .backimage { top: 11px; height: 318px; width: 150px; border-radius: 10px;}
.iphonexrupload .global-mobile#iphone-1242x2688 .backimage { top: 15px; height: 466px; width: 216px; border-radius: 27px;}

	/* Device add in screenshot */

	.global-mobile#iphone-828x1792 { width: 235px; height: auto; }
	.global-mobile#iphone-828x1792 .backimage{ top: 58px; height: 350px; width: 205px; border-radius: 0;}
	.global-mobile#iphone-828x1792{background-size:cover !important;}
	.global-mobile#iphone-828x1792 .image img{ width:225px; height:auto;}



	/* Canvas CSS */

		/*while canvas added new device*/
		.global-mobile#iphone-828x1792.whilecanvas {width:828px!important; height:1792px !important; box-sizing:border-box; font-size:4em;}
		.global-mobile#iphone-828x1792.whilecanvas .image{ width:100%;}
		.global-mobile#iphone-828x1792.whilecanvas.screenshot-only .image{height: 80%;}
		.global-mobile#iphone-828x1792.whilecanvas .title {   padding: 0.63em 0.5em; font-size: 1.05em; word-wrap: break-word; line-height: 1.8em;}  	
		.global-mobile#iphone-828x1792.whilecanvas .image img{ width:82%!important; height:auto!important;}
		.global-mobile#iphone-828x1792.whilecanvas .backimage{     width: 72%!important; height: 76%!important;  top: 171px; left: 1%;    margin: 0 auto;} 


	.iphonexrupload #iphone-828x1792.whilecanvas .backimage {  width: 74%!important; height: 92%!important; top: 52px; margin: 0 auto; left: 0;}	
	.iphonexrupload #iphone-1125x2436.whilecanvas .backimage { width: 74%!important; height: 92%!important; top: 52px;}
	.iphonexrupload #iphone-1242x2208.whilecanvas .backimage { width: 64%!important; height: 92%!important;	top: 58px;}
	.iphonexrupload #iphone-750x1333.whilecanvas .backimage{width: 63% !important;top: 34px;   height: 92% !important;  border-radius: 20px;}
	.iphonexrupload #iphone-640x1136.whilecanvas .backimage{top: 25px; width: 64%!important; height: 92%!important; border-radius: 20px;}
	.iphonexrupload #iphone-640x960.whilecanvas .backimage{top: 23px; width: 51%!important; height: 92%!important; border-radius: 20px;}
	.iphonexrupload .global-mobile#iphone-1242x2688.whilecanvas .backimage{width: 80%!important; height: 92%!important; top: 52px;}
	.iphonexrupload .global-mobile#iphone-1242x2688.whilecanvas .image img{ width:90%!important; height:auto!important;}
		
	/*iphonex condition for iphone xr*/
	.iphonexupload .global-mobile#iphone-828x1792 .backimage{    height: 435px; top: 15px; width: 205px; border-radius: 20px;}
	.iphonexupload .global-mobile#iphone-828x1792.whilecanvas .backimage{height: 94%!important; top:42px; border-radius: 20px; width: 74%!important; left: 0;}


/* Iphone XS MAX  CSS */
	
	/* Device add in screenshot */

	.global-mobile#iphone-1242x2688 { width: 255px; height: auto; }
	.global-mobile#iphone-1242x2688 .backimage{ top: 58px; height: 390px; width: 218px; border-radius: 0;}
	.global-mobile#iphone-1242x2688{background-size:cover !important;}
	.global-mobile#iphone-1242x2688 .image img{ width:245px; height:auto;}

	/* Canvas CSS */

		/*while canvas added new device*/
		.global-mobile#iphone-1242x2688.whilecanvas {width:828px!important; height:1792px !important; box-sizing:border-box; font-size:4em;}
		.global-mobile#iphone-1242x2688.whilecanvas .image{ width:100%;}
		.global-mobile#iphone-1242x2688.whilecanvas.screenshot-only .image{height: 80%;}
		.global-mobile#iphone-1242x2688.whilecanvas .title { padding: 0.63em 0.5em; font-size: 1.05em; word-wrap: break-word; line-height: 1.8em;}  	
		.global-mobile#iphone-1242x2688.whilecanvas .image img{ width:90%!important; height:auto!important;}
		.global-mobile#iphone-1242x2688.whilecanvas .backimage{ width: 79%!important; height: 77%!important; top: 171px; left: 1%; margin: 0 auto;} 

	/*iphonex condition for iphone xr*/
	.iphonexupload .global-mobile#iphone-1242x2688 .backimage{  top: 15px; height: 475px; width: 224px; border-radius: 20px;}
	.iphonexupload .global-mobile#iphone-1242x2688.whilecanvas .backimage{height: 94%!important; top:42px; border-radius: 20px; width: 82%!important; left: 0;}
	.iphonexupload .global-mobile#iphone-1242x2688.whilecanvas .image img{width: 90%!important; }

@media (min-width :1450px) {
	.global-mobile{width:255px;}
}





/*iphone cutt bottom issue */
/* .global-mobile.cuttbottom#iphone-828x1792{height: 500px;}
.global-mobile.cuttbottom#iphone-1242x2688{height:540px;}
.global-mobile.cuttbottom#iphone-1125x2436{height: 525px;}
.global-mobile.cuttbottom#iphone-1242x2208{height:510px;}
.global-mobile.cuttbottom#iphone-750x1333{height:445px;}
.global-mobile.cuttbottom#iphone-640x1136{height:430px;}
.global-mobile.cuttbottom#iphone-640x960{height:380px;}

.global-mobile.cuttbottom#iphone-828x1792.whilecanvas{height:1392px !important}
.global-mobile.cuttbottom#iphone-1242x2688.whilecanvas{height:1392px !important}
.global-mobile.cuttbottom#iphone-1125x2436.whilecanvas{height:1800px !important;}
.global-mobile.cuttbottom#iphone-1242x2208.whilecanvas{height:1808px !important;}
.global-mobile.cuttbottom#iphone-750x1333.whilecanvas{height:1034px !important;}
.global-mobile.cuttbottom#iphone-640x1136.whilecanvas{height:900px !important;}
.global-mobile.cuttbottom#iphone-640x960.whilecanvas{height:700px !important;} */