﻿
.ImageList_Galery {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    cursor:pointer;
}

.ImageList_Galery:hover {
    filter: none; /* IE6-9 */
    -webkit-filter: grayscale(0%);
     cursor:pointer;
}

.itemFormGridImage{ float:left}

.view {

   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;

   vertical-align:bottom; 
   padding-top:10px;
   border:0px dotted rgb(200,200,200); 
   display:block; 

  
   text-align:center;
   margin:0 5px 5px 5px; 
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   
}
.view .mask,.view .content {
   /*width: 300px;
   height: 200px;*/
   /*min-height:150px;
   min-width:150px;*/
   position: absolute;
   overflow: hidden;
   top: 2px;
   left: 0px;
   padding:4px;
   width:100%;
   height:94%;
}


.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.7);
   margin: 17px 0 0 0;
}
.view h2 img{ margin:0 auto; float:left; margin:0 3px 0 5px;}
.ImageList_GaleryBT_Crop{
  background: transparent url(images/btn_custom_crop.png) no-repeat center center;
  width:30px;
  height:30px;
  margin:0 auto;  cursor:pointer;
  /*float:left; margin:0 3px 0 5px;*/
}


.ImageList_GaleryBT_Excluir{
  background: transparent url(images/btn_custom_lixo.png) no-repeat center center;
  width:30px;
  height:30px;
  margin:0 auto;  cursor:pointer; border:none
  /*float:left; margin:0 3px 0 5px;*/
}

.ImageList_GaleryBT_Download{
  background: transparent url(images/btn_custom_download.png) no-repeat center center;
  width:30px;
  height:30px;
  margin:0 auto;  cursor:pointer; border:none
  /*float:left; margin:0 3px 0 5px;*/
}



.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 3px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 1px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info:hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}




/* --------------- */


.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(219,127,8, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   font-size:10px;
   font-weight:100
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
				


/* ----------------- */


#resize_coords{
			width:300px;
		}
		
		#previewExample3{
			margin:10px;
		}

		.redSelection{
			border: 1px dotted #f00;
            cursor:move;
		}

		.GrayMask{
			background-color:#d7d5d5;
			cursor:pointer;
		}




.box_thumbs{
   width:170px;
   text-align:center;
 }

.box_thumbs div{
  width:170px;
  text-align:center;
  vertical-align:top;
 padding-bottom:18px;
 }

.box_thumbs div label{
  width:170px;
  text-align:center;
  display:block;
  padding-top:10px
  }

.box_thumbs div img{
  margin-top:-11px;
  border:1px dotted gray;
  padding:8px;

}



.customThumb_preview{
   max-width:150px;
   max-height:170px;
  -webkit-transform: scale(0.7); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.7); /* FF3.5+ */
      -ms-transform: scale(0.7); /* IE9 */
       -o-transform: scale(0.7); /* Opera 10.5+ */
          transform: scale(0.7);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
 }




.customImagemItem_List{
   max-width:350px;
   max-height:350px;
   min-height:100px;
   min-width:100px;

 }



.customGRID_IMAGE{
   max-width:1245px;

 }