﻿/* PROJECTS STYLE 2 DA-THUMBS HOVER EFFECT */
.no-flicker{-webkit-transform:translate3d(0,0,0); -webkit-backface-visibility: hidden; -moz-transform:translate3d(0,0,0); -moz-backface-visibility: hidden;}

ul.da-thumbs {
	margin-left:0px
}
.da-thumbs {list-style: none;}
.da-thumbs li {position: relative;  }

.da-thumbs li a,.da-thumbs li a img {display: block;position: relative;}
.da-thumbs li a {overflow: hidden;margin-bottom:15px }
.overlay-categories {display: block;position: relative;float: left;padding: 0px 0 0 0;margin: 5px 20px 0 25px !important;width: 83% !important;}
.viewproj {display: block;position: absolute;bottom: 10px;padding: 0 0 0 0;margin: 35px 20px 10px 22px;padding-right: 10px;color: #f2f2f2;font-size: 25px;font-weight: bold;}
.da-thumbs li a div {position: absolute;width: 100%;height: 100%;}
.da-thumbs li a div.da-animate {-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}

.da-thumbs img {width:100%}

/* Projects css */
#projects-2{position: relative;	float: left;width: 100%;margin-bottom:0px;}
/* Initial state classes: */
.da-slideFromTop{left: 0px;top: -100%;}
.da-slideFromBottom{left: 0px;top: 100%;}
.da-slideFromLeft{top: 0px; left: -100%;}
.da-slideFromRight {top: 0px;left: 100%;}
/* Final state classes: */
.da-slideTop {top: 0px;}
.da-slideLeft {left: 0px;}
.da-thumbs a div .overlay-categories{display: block;position: relative;float: left;padding: 5px 0 0 0;margin: 5px 20px 0 41px;width: 83% !important;}
.da-thumbs li a div .viewproj{display: block;position: absolute;bottom: 15px;padding: 0 0 0 0;margin: 52px 20px 5px 20px;padding-right: 10px;color: #f2f2f2;font-size: 14px;font-weight: bold;}

.da-thumbs a div .overlay-categories{display: block;position: relative;float: left;padding: 60px 0 0 0;margin: 5px 20px 0 15px;width:83% !important; color:#f2f2f2}
.da-thumbs a div .overlay-categories p{color:#f2f2f2;}
.da-thumbs a div .overlay-categories span{margin: 5px -4px -4px 5px;font-size: 10px;font-family: 'Source Sans Pro', verdana, sans-serif; color: #fff;position: relative;float: left;padding: 0 5px;background: rgba(0, 0, 0, 0.5) !important; border:1px solid red}
.da-thumbs a div .overlay-title, .da-thumbs li a div .da-title{display: block;position: relative;float: left;padding:0;margin: 10px 20px 0 20px;font-weight: normal;color: #fff;font-size:.9em;font-family: 'Source Sans Pro', verdana, sans-serif;font-weight:500;line-height: 1.3em; width:83%;}
.da-thumbs a div .viewproj i{font-size: 22px;padding-left: 3px;vertical-align: middle;}
.da-thumbs li.four a div .overlay_sep{height: 2px;background: #7AB317;width: 35px;position: relative;float: left;margin: 0 0 5px 15px;}
.da-thumbs li.four a div .overlay_text{display: block;position: relative;float: left;padding: 10px 0 30px 0;margin: 0 20px 20px 15px;font-weight: normal;color: rgba(255,255,255,0.9);text-shadow: 1px 1px 1px rgba(0,0,0,0.2);width: 83%;font-size: 11px;line-height: 18px;font-family: 'Source Sans Pro', verdana, sans-serif;}
.da-thumbs li a div.da-animate{background-color: rgba(23,117,187,.9) !important;}	

.overlay-title-container{
z-index: 50; position: absolute; top: 0; left: 0; background-color: rgba(23,117,187,0.8) !important;/*background-color: rgba(25,25,25,0.3) !important;*/ height: 57px !important}


@media only screen 
and (min-width : 601px) 
and (max-width : 900px)
{

.da-thumbs a div .overlay-title, .da-thumbs li a div .da-title {
	font-size:.8em;
	line-height:1.1em
}

.overlay-title-container{
	height: 60px !important
}
	
}
@media only screen 
and (min-width : 100px) 
and (max-width : 600px) 
{
.da-thumbs a div .overlay-title, .da-thumbs li a div .da-title {
  font-size:.9em;
  line-height:1.2em	
}

span.overlay-categories {
	font-size:.9em !important;
	line-height:1.2em		
}

.da-thumbs li {
	margin-bottom:15px;

}


}