@media screen and (min-width: 280px) {

.avatar-view {cursor: pointer; overflow: hidden;}
.avatar-view img {width: 99%;}
.avatar-body {padding-right: 0px; padding-left: 0px;}
.avatar-upload {  overflow: hidden;  margin-top:0px;}
.avatar-upload label {  display: block;  float: left;  clear: left;  width: 100px;}
.avatar-upload input { display: block; margin-left: 0px;}
.avatar-alert { margin-top: 10px;  margin-bottom: 10px;}
.avatar-wrapper {  height: 400px;  width: 99%;  margin-top: 4px;  box-shadow: inset 0 0 5px rgba(0,0,0,.25);  background-color: #fcfcfc;  overflow: hidden;}
.avatar-preview {  float: left;  margin-top: 7px;  margin-right: 15px;  border: 1px solid #eee;  border-radius: 4px;  margin-bottom:6px;  background-color: #fff;  overflow: hidden;}
.avatar-preview:hover {  border-color: #ccf;  box-shadow: 0 0 5px rgba(0,0,0,.15);}
.avatar-preview img {  width: 100%;}
.preview-lg { height: 144px;  width: 144px;  margin-top:7px;}
.preview-md { height: 80px; width: 80px;}
.preview-sm {  height: 50px;  width: 50px;}

.cropdiv1{margin-bottom:-30px; width:100%; height420px; font-size:12px;}
.cropdiv2{height:20px; margin-top:-30px;}
.cropdiv3{margin-top:-40px; width:100%; font-size:14px;}
.cropdiv4{margin-top:-5px; width:100%;}
.cropdiv5{margin-top:-10px; width:100%;}
.cropdiv6{font-size:14px;}
.cropdiv7{margin-top:50px;}
.cropdoneimg{height:200px; width:250px; margin-top:10px; cursor:pointer;}


}


@media screen and (min-width: 845px) {
	
.avatar-view {cursor: pointer; overflow: hidden;}
.avatar-view img {width: 99%;}
.avatar-body {padding-right: 0px; padding-left: 0px;}
.avatar-upload {  overflow: hidden;  margin-top:0px;}
.avatar-upload label {  display: block;  float: left;  clear: left;  width: 100px;}
.avatar-upload input { display: block; margin-left: 0px;}
.avatar-alert { margin-top: 10px;  margin-bottom: 10px;}
.avatar-wrapper {  height: 400px;  width: 99%;  margin-top: 4px; margin-left:20px; padding-left:20px; margin-bottom:20px;  box-shadow: inset 0 0 5px rgba(0,0,0,.25);  background-color: #fcfcfc;  overflow: hidden;}
.avatar-preview {  float: left;  margin-top: 7px;  margin-right: 15px;  border: 1px solid #eee;  border-radius: 4px;  margin-bottom:6px;  background-color: #fff;  overflow: hidden;}
.avatar-preview:hover {  border-color: #ccf;  box-shadow: 0 0 5px rgba(0,0,0,.15);}
.avatar-preview img {  width: 100%;}
.preview-lg { height: 144px;  width: 144px;  margin-top:7px;} 
.preview-md { height: 80px; width: 80px;}
.preview-sm {  height: 50px;  width: 50px;}

.cropdiv1{margin-bottom:-30px; width:100%; height420px; font-size:12px;}
.cropdiv2{height:20px; margin-top:-30px;}
.cropdiv3{margin-top:-40px; width:100%; font-size:18px;}
.cropdiv4{margin-top:-5px; width:100%;}
.cropdiv5{margin-top:-10px; width:100%;}
.cropdiv6{font-size:14px;}
.cropdiv7{width:40%;}
.cropdoneimg{height:250px; width:300px; margin-top:20px; cursor:pointer;}

}