/* RPOJECTS LIST */


  .
  .slide.page-heading h1,.slide.page-heading h1 *{color:#fff;font-size:36px;font-weight:400;margin:0;padding:0}
  .slide.page-heading p{color:#fff;font-size:16px}
  .slide.clients{padding-bottom:70px}
  
  
  
.slide.page-heading { background-color: #8BC9DE; padding:100px 0 70px 0;text-align:center}
.slide.page-heading h1 { /* color:#3F6B7A; */ font-size:35px;color:#fff; display: block; margin:0 auto; padding:0;}

.slide.portfolio { background-color: #EEEEEE; padding:5px 20px}
.slide.portfolio .col {padding:5px !important}

.nav.nav-pills.filters {margin-bottom: 0}
.nav.nav-pills.filters li a {font-size:16px;color:#5b5b5b;border-radius: 0; padding:15px 15px;border-right:1px solid #E5E5E5;border-bottom: 1px solid #E5E5E5}
.nav.nav-pills.filters li a .badge{margin-top:3px}
.nav.nav-pills.filters li.active a {background-color: #EEEEEE}
.nav.nav-pills.filters li.active a .badge {background-color: #8BC9DE;color:#fff;}



.grid{padding:0}
.grid div.col {position: relative}
.grid figure{margin:0; position:relative}
.grid figure img{max-width:100%; display:block; position:relative}
.grid figcaption{
	position: absolute;
	top: 0;
	left: 106px;
	padding: 10px 20px;
	background: #fff;
	color: #5b5b5b
}
.grid figcaption h3{margin:0; padding:0; color:#000;font-size:22px;}
.grid figcaption span{color:#5b5b5b;display: block;font-size:13px}
.grid figcaption a{margin:7px 0;border:1px solid rgba(0,0,0,0.2); color:#5b5b5b;font-size:12px;}
.grid figcaption a:hover{background-color: #5b5b5b; border:1px solid #5b5b5b;color:#fff}

.cs-style-3 figure{overflow:hidden}
.cs-style-3 figure img{-webkit-transition:-webkit-transform 0.4s; -moz-transition:-moz-transform 0.4s; transition:transform 0.4s}

.no-touch .cs-style-3 figure:hover img, 
.cs-style-3 figure.cs-hover img{-webkit-transform:translateY(-50px); -moz-transform:translateY(-50px); -ms-transform:translateY(-50px); transform:translateY(-50px)}

.cs-style-3 figcaption{
	height: 100px;
	width: 100%;
	top: auto;
	bottom: 134px;
	opacity: 0;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.4s,opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s,opacity 0.1s 0.3s;
	transition: transform 0.4s,opacity 0.1s 0.3s
}

.no-touch .cs-style-3 figure:hover figcaption, 
.cs-style-3 figure.cs-hover figcaption{opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); -webkit-transition:-webkit-transform 0.4s,opacity 0.1s; -moz-transition:-moz-transform 0.4s,opacity 0.1s; transition:transform 0.4s,opacity 0.1s}


@media (max-width: 640px) {
	.cs-style-3 figure{overflow:visible}
	.cs-style-3 figcaption{ visibility: visible;backface-visibility:visible; }
}


/* RPOJECT DETAIL */
.slide.project.page-heading .container {padding-left:24px; padding-right:24px}
.slide.project.page-heading h1{ display:block;margin:0;float:none;font-size:45px; text-align: left}
.slide.project.page-heading p { display: block;text-align: left}
.slide.project.page-heading .col-left {padding-left:0}
.slide.project.page-heading .col-right { text-align: right; margin-top: 22px;}
.slide.project.page-heading .col-right a i{ display:inline-block;width:25px; height:34px;margin-left:10px;background: url(../images/sprite-project-detail.html) no-repeat 4px top}
.slide.project.page-heading .col-right a i.icon-right-open { background-position: -19px top}
.slide.project.page-heading .col-right a i.icon-th{ background-position: -42px top; width:38px;}

.slide.project-detail { padding:30px 0;}
.slide.project-detail .row .col-left { text-align: left}
.slide.project-detail .row .col-left .description { padding-bottom: 20px}
.slide.project-detail .row .col-left .description h4 { color:#000}
.slide.project-detail .row .col-left .description li { margin-left: 17px;}
.slide.project-detail .project-detail-image-row { margin-bottom: 10px}


/* SIMILAR PROJECTS */
.slide.similar-projects{ background-color:#F9F9F9;padding-bottom: 70px }
.slide.similar-projects .header { margin-bottom: 50px}
.slide.similar-projects .header h1 {}


.popover {z-index: 9999 !important; }
.popover-title { font-size:16px;font-family: 'open_sanslight' !important}
.popover-content {padding:0}

.slide.footer .col3 a:hover{ background-color: #8BC9DE; border-color:#8BC9DE;color:#fff}


@media (max-width: 1024px) {
	.grid figcaption h3{font-size:18px;}
	.grid figcaption a, .grid figcaption span{font-size:12px;}
	.grid figcaption a{right:5px}
}


@media (max-width: 640px) {
	.slide.page-heading .container {padding-left:20px; padding-right: 20px}
	.slide.page-heading h1 { font-size:24px}
	
	.slide.project.page-heading { padding-top:110px 0 30px 0; text-align: center}
	.slide.project.page-heading h1 { font-size:35px}
	.slide.project.page-heading h1, .slide.project.page-heading p { text-align: center}
	.slide.project.page-heading .col-right { margin-top:15px;text-align: center}
	.slide.project-detail { padding:20px 0;}
	.slide.project-detail .container{ padding:0;}
	.slide.project-detail .row .col-right { padding:0;}
	#project-brief a { margin-bottom: 25px; display: block;}
	
	.grid figcaption{position:relative; padding:10px; }
	.grid figcaption h3 { font-size:24px}
	.cs-style-3 figure img{-webkit-transition:none; -moz-transition:none; transition:none}

	.no-touch .cs-style-3 figure:hover img, 
	.cs-style-3 figure.cs-hover img{-webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none}
	
	.cs-style-3 figcaption{height:100px; width:100%; top:auto; bottom:auto; opacity:1; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none; -webkit-backface-visibility:visible; -moz-backface-visibility:visible; backface-visibility:visible; -webkit-transition:-webkit-transform 0.4s,opacity 0.1s 0.3s; -moz-transition:-moz-transform 0.4s,opacity 0.1s 0.3s; transition:transform 0.4s,opacity 0.1s 0.3s}
	
	.similar-projects .row.grid .col { margin-bottom: 20px}
	
	
}

@media (min-width: 690px) and (max-width: 1024px) {
	.slide.page-heading h1 { font-size:25px}
	.nav.nav-pills.filters li a {font-size:12px;display: block !important; min-width:100% !important}
	.nav.nav-pills.filters li a .badge{display: none}
	
	.slide.project.page-heading h1 { font-size:35px}

}