/* Projects home CSS */

.projects-wrapper 
{
	background:  #c7c7c7 url('/designs/default/img/bg-grey-reflection.jpg') repeat-x;
	border-bottom: 1px solid #fff; 
	border-top: 1px solid #fff;

	
	-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:    0px 5px 10px rgba(0, 0, 0, 0.15);
	box-shadow:         0px 5px 10px rgba(0, 0, 0, 0.15);
   
    
    padding-bottom: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    margin-top: 10px;
	
}

.projects
{
    height: 320px;
    width: 100%;
    position: relative;
    background-color: #333;
}

.content
{
    width: 100%;
    margin: 0 20px;
}

.image
{
    margin-left: 0;
    position: relative;
}

.image a img, .image a
{
    border: none; 
    max-width: none;
    overflow: hidden; 
    float: left;
}

.image img {
	width: 205px;
	height: 143px;
}

.image a 
{
	border: 5px solid #222; margin: 5px;
}

.image a:hover
{
    border: 5px solid #C18EB5;
}
.image a:hover img 
{
    margin: 0px;
}

.image a
{
    margin-bottom: 14px;
}

.galleryTitle
{
    font-size: 20px;
    line-height: 18px;
    font-family: "Goodtimes", "Arial Black", Gadget, sans-serif;
    color: #C18EB5; 
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}
p.galleryTitle { padding-bottom: 6px; }

.projectsTitle
{
    padding: 20px 30px;
}

.title
{
    color: grey;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    font-family: arial,helvetica,verdana,clean,sans-serif;    
}

/*  Tooltip */

.tooltips
{   
    display: none;  
    width: 180px;
    position: absolute;
    background-color: #C18EB5;
    z-index: 9999;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(64, 64, 64, 0.8);
    box-shadow: 0px 0px 5px 2px rgba(64, 64, 64, 0.8);
    
    top: 80px;
    left: 22px;
    
    
}

.ttContent
{
    font-size: 12px;
    font-family: "Goodtimes", "Arial Black", Gadget, sans-serif;
    color: #333; 
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px;        
}

.shadow
{
    -webkit-box-shadow: 0px 0px 20px 5px #000;
    box-shadow: 0px 0px 20px 5px #000;    
}

/* counter CSS */
.counter
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;    
    z-index: 3;
}

.numbers
{
    position: absolute;
    top: 20%;
    left: 45%;
}

.numbers p
{
    color: #C18EB5;
    font-size: 150px;
    line-height: normal;
}

/* FIX */
.footer-bg, .subnav-bg
{
    margin-top: 0px;    
}

.subnav-bg
{
    margin-bottom: 0px;    
}

@media (min-width: 768px) and (max-width: 979px) {

	.projects {
		
	}
	.galleryTitle
	{
	    font-size: 14px;
	    display: block;
	    width: 100%:
	 
	}
	.image a { border: 5px solid #222; margin: 5px;}
	.image img {
		width: 100%;
		height: auto;
	}
	.tooltips
	{   
	   	
	   	width: 140px;
	    top: 50px;
	    left: 13px;
	    
	    
	}

	
}

/* ==== CSS STYLES FOR ALL MOBILE PHONES blue */
@media (max-width: 767px) {
	
	.projects .span4 {
		width: 33%;
		float: left;
		position: relative;
	}	
	
	.galleryTitle
	{
	    font-size: 12px;
	    display: block;
	    width: 100%:
	 
	}
	
	.image a:hover
	{
	    border: none;
	}
	.image a:hover img 
	{
	    margin: 0px;
	}
	.image img {
		width: 100%;
		height: auto;
	}
	
	.content
	{
	    width: 100%;
	    margin: 0 0px 0px 0px;
	}
	
	.tooltips
	{   
	   	
	   	width: 120px;
	    top: 20px;
	    left: 10px;
	    
	 
	}
	
		
}