* {
       padding: 0px;
       margin: 0px;
       font-family: verdana;
       font-size: 12px;
   }
   
   #front_upload_box {
       margin-top: 20px;
   }
   
   .progress-holder {
       width: 300px;
       padding: 2px;
       background: #CCCCCC;
       border-radius: 3px;
       float: left;
       margin-top: 4px;
       margin-right: 5px;
   }
   
   #dropbox {
       font-size: 18px;
       font-family: "Open Sans";
       padding: 80px 0 40px 0;
       border: 2px dashed #e0e0e0;
       border-radius: 5px;
       color: #ddd;
       font-weight: 400;
       margin: 0;
   }
   
   #dropbox.active {
       box-shadow: 0px 0px 35px #ccc;
   }
   
   #front_upload_box .panel-heading {
       font-weight: 700;
       font-size: 14px;
       font-family: "Open Sans";
       
   }
   
   .drap-area {
       width: 100%;
       font-weight: bold;
       letter-spacing: 1px;
       font-size: 17px;
       text-align: center;
       position: relative;
       color: #ddd;
   }
   
   .drap-area span {
       font-size: 30px;
       margin-bottom: 10px;
       position: absolute;
       top: 40px;
       left: 50%;
       -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
   }
   
   #progress {
       height: 6px;
       display: block;
       width: 0%;
       border-radius: 2px;
       background: -moz-linear-gradient(center top, #13DD13 20%, #209340 80%) repeat scroll 0 0 transparent;
       /* IE hack */
       background: -ms-linear-gradient(bottom, #13DD13, #209340);
       /* chrome hack */
       background-image: -webkit-gradient(linear, 20% 20%, 20% 100%, from(#13DD13), to(#209340));
       /* safari hack */
       background-image: -webkit-linear-gradient(top, #13DD13, #209340);
       /* opera hack */
       background-image: -o-linear-gradient(#13DD13, #209340);
       box-shadow: 3px 3px 3px #888888;
   }
   
   .preview {
       padding: 10px;
       color: #4D4D4D;
       float: left;
       border-radius: 2px;
       width: 100%;
       overflow: auto;
       height: 160px;
   }
   
   .percents {
       float: right;
   }
   
   .preview-image {
       box-shadow: 3px 3px 3px #888888;
       width: 70px;
       height: 70px;
       float: right;
       margin-right: 10px;
   }
   
   .file-info {
       height: 50px;
       float: left;
       width: auto;
       margin-bottom: 10px;
       border: 1px solid blue;
   }
   
   .file-info span {
       margin: 3px 2px;
       font-size: 12px;
       float: left;
       display: block;
       min-width: 100px;
       overflow: auto;
       border: 1px solid red;
       overflow: none;
   }
   
   .upload-progress {}
   
   #UploadedFile {
       width: 0.1px;
       height: 0.1px;
       opacity: 0;
       overflow: hidden;
       position: absolute;
       z-index: -1;
   }
   
   .fileElemfront {
       background: #0f6fbd;
       ;
       text-transform: none;
       font-family: "Open Sans";
       border-radius: 5px !important;
       padding: 7px;
       font-weight: 500;
       display: block;
       width: 100%;
       text-align: center;
       cursor: pointer;
       color: white;
   }
   
   .fileElemfront span {
       font-size: 14px;
   }
   
   .fileElemfront span.glyphicon {
       margin-right: 4px;
   }
   
   .progress {
       width: 100%;
   }
   
   #front-progress {}
   
   #front_upload_box .alert {
       border-width: 1px 1px 1px 5px;
   }
   
   #front_upload_box .alert.alert-danger {
       border-left-color: #ce4844;
   }
   
   #front_upload_box .alert.alert-dismissable {
       border-left-color: #0f6fbd;
   }
   
   #front_upload_box .alert.alert-success {
       border-left-color: #138d16;
   }
   
   #front_upload_box .alert h4 .glyphicon {
       font-size: 18px;
   }
   
   .file-info-wrap {
       padding-left: 15px;
   }
   
   #front-file-name {
       font-size: 16px;
       font-family: "Open Sans";
       font-weight: 700;
       line-height: 1.7;
   }
   
   .display-block {
       display: block;
       word-wrap: break-word;
       width: 100%;
   }
   
   .upload-thumbnail img {
       box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
       max-width: 200px;
       min-width: 100px;
       margin-right: 10px;
       margin-bottom: 10px;
   }
.thumb
{
	height: 200px;
	border: 1px solid #000;
	margin: 1px 5px 10px 2px;
}

.img-wrap {
    border: 1px solid blue;
    padding: 10px;
}

.img-wrap-inner {
    border: 1px solid red;
    /*width: 100%;
    height: 100%;*/
    overflow: hidden;
    /*border-radius: 50%;*/
}

.img-wrap-inner .img-circle {
        top: -10px;
        position: relative;
    }
.circular {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://link-to-your/image.jpg) no-repeat;
}
.img-thumb-circle {
    border-radius: 50%;
}
.image-face-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
}

.guidelines {
    pointer-events: none;
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
}