@charset "utf-8";
/* CSS Document */

@charset "utf-8";
@font-face {
font-family: "big_noodle_titling";
font-style: normal;
font-weight: normal;
src: url("fonts/big_noodle_titling.eot?#iefix") format("embedded-opentype"), 
url("fonts/big_noodle_titling.ttf") format("truetype"), url("fonts/big_noodle_titling.svg#big_noodle_titling") format("svg");
}

@font-face {
font-family: "swiss721_light";
font-style: normal;
font-weight: normal;
src: url("fonts/swiss721_light.eot?#iefix") format("embedded-opentype"), 
url("fonts/swiss721_light.ttf") format("truetype"), url("fonts/swiss721_light.svg#swiss721_light") format("svg");
}

html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
border: 0 none;
margin: 0;
padding: 0;
}
body {
color: #fff;
font-family: 'Lato', sans-serif;

}
.container {
height: 100%;
width: 100%;

-webkit-transition:all 1s;

}
.clearfix:after{clear:both; height:0; content:''; display:block;}
a {outline: 0 none;text-decoration: none;}
a:hover {text-decoration: none;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {display: block;}
ul {list-style: none outside none;}
.clear {clear: both;}
.floatl {float: left;}
.floatr {float: right !important;}
.w420 {width: 420px;}
.w301 {width: 301px;}
.w190 {width: 195px;}
.w184 {width: 184px;}
.w167 {width: 167px;}
.w610 {width: 610px !important}
.w490 {width: 490px !important;}
.w85 {width: 85px}
.w55 {width: 55px;}
.w200 {width: 200px;}
.w208 {width: 208px}
.w225 {width: 260PX !important}
.w272 {width: 272px;}
.w733 {width: 733px;}
.w202 {width: 202px;}
.w248 {width: 248px;}
.w763 {width: 763px;}
.w464 {width: 464px;}
.w300 {width: 300px;}
.w193 {width: 193px;}
.w311 {width: 311px;}
.w364 {width: 364px  !important;}
.w243 {width: 243px;}
.w373 {width: 373px;}
.w322 {width: 322px;}
.w710 {width: 710px !important;}
.w420 {width: 420px !important;}
.w764 {width: 764px !important;}
.w426 {width: 426px;}
.w323 {width: 323px;}
.w689 {width: 689px !important;}
.w315 {width: 315px;}
.marb20 {margin-bottom: 20px !important;}
.mart20 {margin-top: 20px !important;}
.marb10 {margin-bottom: 10px !important;}
.marb30 {margin-bottom: 30px !important;}
.marb5 {margin-bottom: 5px !important;}
.marb25 {margin-bottom: 25px !important;}
.marb14 {margin-bottom: 14px !important;}
.marb15 {margin-bottom: 15px !important;}
.marb18 {margin-bottom: 15px !important;}
.marl8 {margin-left: 8px;}
.marl15 {margin-left: 15px;}
.marl25 {margin-left: 25px;}
.marl-5 {margin-left: -5px;}
.marr-5 {margin-right: -5px;}
.marr58 {margin-right: 58px;}
.marr22 {margin-right: 22px;}
.marr79 {margin-right: 79px;}
.marr22 {margin-right: 22px;}
.marr79 {margin-right: 79px;}
.marr35 {margin-right: 35px;}
.marr10 {margin-right: 10px;}
.mart5 {margin-top: 5px;}
.marr29 {margin-right: 29px !important;}
.marr20 {margin-right: 20px;}
.marr10 {margin-right: 10px;}
.marr15 {margin-right: 15px;}
.marb38 {margin-bottom: 38px !important;}
.pad10{padding:10px !important}
.pad15{padding:15px !important}
.pad20{padding:20px !important}
.pad25{padding:25px !important}
.pad30{padding:30px !important}
.pad35{padding:35px !important}
.padt10 {padding-top: 10px;}
.padb10 {padding-bottom: 10px;}
.padl15 {padding-left: 15px !important;}
.padr15 {padding-right: 15px;}
.padb10 {padding-bottom: 10px;}
.padb15 {padding-bottom: 15px;}
.f12{font-size:12px !important;}
.f13{font-size:13px !important;}
.f14{font-size:14px !important;}
.f15{font-size:15px !important;}
.f16{font-size:16px !important;}
.f17{font-size:17px !important;}
.f18{font-size:18px !important;}
.f19{font-size:19px !important;}
.f20{font-size:20px !important;}
.f21{font-size:21px !important;}
.f22{font-size:22px !important;}
.f23{font-size:23px !important;}
.f24{font-size:24px !important;}
.f25{font-size:25px !important;}
.f26{font-size:26px !important;}
.f27{font-size:27px !important;}
.f28{font-size:28px !important;}
.f29{font-size:29px !important;}
.f30{font-size:30px !important;}
.f31{font-size:31px !important;}
.f32{font-size:32px !important;}
.f33{font-size:33px !important;}
.f34{font-size:34px !important;}
.f35{font-size:35px !important;}

.wrapper{width:100%;margin: 0 auto;position:relative;overflow:hidden;}
input[type=text]{outline:none;}
header{position:fixed;top:0px;left:0px;width:100%;background:#fff;padding:12px 0px;z-index:99;box-shadow: 0px 0px 10px #ccc;}
section{margin-top: 75px;}

.frames.horizontal{margin:0 auto;width:260PX;height:260PX;position:relative;}
.image-editor{width:260PX;height:260PX;border:1px solid #ccc;position:relative;}
.cropit-image-preview{border-radius:130px;overflow: hidden;}
.frames.vertical{width:98%; margin:auto 1% auto 1%;}
.frames > img{position:absolute;}
#frame_border{z-index:2;pointer-events:none; position:absolute; top:0;display:block;}
.frame_container{width:100%; overflow:hidden;position:relative;padding:10px 0px;}

.frames > img#imgprvw{z-index:-1;position:absolute;}
.button{background:#EC3237;color:#fff; text-align:center; padding:10px 50px;display:inline-block; margin:0px 1% 0px 1%;}

.draggable
{
    position: absolute; 
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;   

     cursor: url(../images/grab.png), auto;     
}

.resizable
{
    width: 50%;   
    top:0px;left:0px; 
}
.resizable img
{
    width: 100%;  
	top:0px;left:0px; 
}

.ui-resizable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    width: 9px;
    height: 9px;
    
    z-index: 2;
}
.ui-resizable-se
{
    right: -5px;
    bottom: -5px;
}

.ui-rotatable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
   
    
    height:        10px;
    left:          50%;
    margin:        0 0 0 -5px;
    position:      absolute;
    top:           -5px;
    width:         10px;
}

.ui-rotatable-handle.ui-draggable-dragging
{
    visibility:  hidden;
	
}
.ui-draggable-dragging{
cursor: url(../images/grabbing.png), auto !important;
}
.ui-resizable-se{right:-5px !important;bottom:-5px !important;;}
.form_box{margin-top:15px;}
.form_box > input[type=text]{padding:5%;border:1px solid #ccc; width:80%; margin:0px 1% 0px 1%;}
.blue_button{display:inline-block;padding:5px 10px;background:#EC3237;color:#fff; }
.blue_button:hover,.blue_button.active{border:1px solid #EC3237 !important; color:#EC3237 !important; background:none !important;}
section{padding:25px 0px;}
.inside_text{position:absolute; width:200px; height:25px; color:#000000; left:50%; margin-left:-100px; top:25%; margin-top:-12px; text-align:center; vertical-align:middle;}
.right_panel{margin-top:0px; width:98%;  margin:0px 1% 0px 1%;}
.rleft_panel{margin-top:0px; width:100%; float:left;}
.ins_txt{color:#EC3237; width:90%; margin:0 auto 10px auto;}
.ins_txt p{color:#666;}

.input-file-container {
  position: relative; text-align:center
} 
.input-file-trigger {
  display: block; margin-top:15px;
  padding: 14px 45px;
  background: #035aa0;
  color: #fff;
  font-size: 1.2em;
  transition: all .4s;
  cursor: pointer;
}
.input-file {
  position: absolute;
  top: 0; left: 0;
  width: 260PX;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}
.input-file:hover + .input-file-trigger,
.input-file:focus + .input-file-trigger,
.input-file-trigger:hover,
.input-file-trigger:focus {
  background: #034f8c;
  color: #ffffff;
}

.file-return {
  margin: 0;
}
.file-return:not(:empty) {
  margin: 1em 0;
}
.file-return {
  font-style: italic;
  font-size: .9em;
  font-weight: bold;
}
.file-return:not(:empty):before {
  content: "Selected file: ";
  font-style: normal;
  font-weight: normal;
}

.cropit-image-preview {
  /*background-color: #f8f8f8;
      
        border: 2px solid #FF5100;*/
        /*border-radius:160px;*/
        width: 260px;
  height: 260px;
  cursor: move
}
.cropit-image-background {
  opacity: .2;
  cursor: auto;
}
.cropit-image-input {
  width:100%;
}
.image-size-label {
  margin:10px 1% 0px 1%;
  color:#2E2E2E;
}
input {
  display: block;
}
button[type="submit"] {

}
#result {
  margin-top: 10px;
  width: 900px;
}
#result-data {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.form-element{margin-bottom: 1rem;}
.template_sel a{margin-right: 1rem;display:inline-block;border:6px solid transparent;}
.template_sel a img{width: 120px;}
.template_sel a.active{border:6px solid blue !important;}
.template_sel a:hover{border:6px solid #999;}
.form-element label{font-size: 0.9rem;}
.form-element label span{font-size: 1rem;color:red;font-weight: bold;}
.btn-primary{background:#3c2a98 !important;border:none !important;min-width: 100px;}
.lm-20{margin-left: 20px;}
.btn-success{background: #dd2618 !important;border:none !important;min-width: 100px;}
.form-element label{color:#2c2d65 !important;}
  #face{position:absolute;top:3.7%;width: 28.8%;left: 4.7%; }
  #face img{width: 100%;}
  .image_box .doc_details{top:7.8%;left: 39%;position: absolute;color:#fff;}
  .chocolaty_color{color:  #734212 !important; }
  .Maroon_color{color:  #CD0000 !important; }
  .Blue_color{color:  #393185 !important; }

.image_box.urdu #face{right: 4.7%;left: auto;}
  .image_box.urdu .doc_details{top:7%;left: 8%;}
  .doc_details h2{font-size: 30px;margin-bottom: 0.3rem;font-weight: bold;}
  .doc_details h5{font-size: 16px;margin-bottom:0.1rem; font-weight: bold;}
  .image_box{position: relative;}
.elem{position: relative;z-index: 100;}
.elem .error{background:red;padding:10px 15px 10px 10px;font-size:13px;color:#fff !important;  position:absolute;left:0px;top:-35px;border-radius:2px;text-align:left;font-family: 'Heebo', sans-serif;btz-index:5;}
.elem .error:after{border-width:10px;border-color:red transparent transparent transparent;border-style:solid;content:'';position:absolute;bottom:-18px;left:15px;}
/* urdu start*/
#face1 {
    position: absolute;
    top: 3.7%;
    width: 28.8%;
    left: 66.7%;
}
#face1 img{width: 100%;}
  
.image_box1 .doc_details1 {
    top: 7.8%;
    left: 8%;
    position: absolute;
    color: #fff;
}
 .image_box1{position: relative;}
/* urdu start*/

.print_show{display:block !important;}
.print_hide{display:none !important;}

@media (max-width: 500px){
  .template_sel a img{width: 125px;}
  .doc_details h2{font-size: 20px;}
  .doc_details h5{font-size: 14px; margin-bottom:0.0rem;}
  .doc_details1 h2{font-size: 20px;}
  .doc_details1 h5{font-size: 14px; margin-bottom:0.0rem;}
  .image_box .doc_details{top:6.5%;left: 39%;position: absolute;color:#fff;}

}