.navbar-default { background-color: #FFF; border-color: #CCC;}
.navbar { background:#000;}
@media(min-width:767px) { 
.navbar {     padding: 2px 0;     -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;     -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;     transition: background .5s ease-in-out,padding .5s ease-in-out; }  
.top-nav-collapse {     padding: 2px; }}
.navbar-inverse .navbar-nav > .active > a , .navbar-inverse .navbar-nav > .active > a:focus { background-color: #4ECDC4;  border: none; color: #fff;}
.navbar-inverse .navbar-nav > .active > a:hover{ background-color: #FFCB05; color: #fff;}
.navbar-inverse .navbar-nav > li >  a:hover , .navbar-inverse .navbar-nav > li >  a:focus{ background-color: #4ECDC4; }
.navbar-nav > li > a {    padding-top: 10px;    padding-bottom: 10px;}


/* Section Title */
.section-title h1{ font-size:48px; text-transform:uppercase; font-weight:700; margin-bottom:50px;}
.section-title h1:before{ content: url(../img/title-before.png); display:block; float:left;}

@media(max-width:767px) {
.section-title h1{ font-size:32px; text-transform:uppercase; font-weight:700; margin-left:30px;}
}

/* Portfolio Grid and Hover Effects */
.grid { padding: 20px 20px 100px 20px; max-width: 1300px; margin: 0 auto; list-style: none; text-align: left;}
.grid figure { margin: 0; position: relative; margin-top:10px;}
.grid figure img { max-width: 100%; display: block; position: relative;}
.grid figcaption { position: absolute; top: 0; left: 0; padding: 10px; background: #000; color: #ed4e6e;}
.grid figcaption h3 { font-size:15px; text-transform:uppercase; margin: 0; padding: 0; color: #fff;}
.grid figcaption a { text-align: center; padding: 5px 10px; border-radius: 0; display: inline-block; background: #ed4e6e; 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: 50px; width: 100%; top: auto; bottom: 0; opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -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;}
.cs-style-3 figcaption a { position: absolute; bottom: 5px; right: 5px;}

/* Caption Style 2 */
.cs-style-2 figure img { z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img { -webkit-transform: translateY(-90px); -moz-transform: translateY(-90px); -ms-transform: translateY(-90px); transform: translateY(-90px);}
.cs-style-2 figcaption { height: 90px; width: 100%; top: auto; bottom: 0;}
.cs-style-2 figcaption a { position: absolute; right: 20px; top: 30px;}