/* ================================================================ */
/* Copyright: Aris Dwi Sulistiawan                                  */
/* Tema : Inprodev                                                  */
/* ================================================================ */
@media (min-width:900px){.container{width:900px}}
.img-responsive{margin: 0 auto;}
a.btn-inprodev, .btn-inprodev{ background:#fff; border: 3px solid #21282e; color: #21282e; font-size:14px; line-height:34px; padding:0 20px; position:relative; display:inline-block; text-transform:uppercase; font-family:"robotobold",Arial, Helvetica, sans-serif; letter-spacing:0.5px; }
a.btn-inprodev:before, .btn-inprodev:before{ background: #ff4229; height: 34px; width: 7px; content: ""; left: 0; position: absolute; top: 0; width: 8px; }

header{ position:fixed; width:100%; z-index:30; }

.topbar{ background:#21282e; position:relative; z-index:20; }
.topbar ul.topbar-right{ list-style:none; margin:0; padding:0; float:right; }
.topbar ul.topbar-right li{ display:inline-block; color:#fff; vertical-align:middle; padding:8px 15px; border-right:1px solid #4c4c4c; font-size:14px; }
.topbar ul.topbar-right li a{ color:#fff; vertical-align:middle; }
.topbar ul.topbar-right li:first-child{ border-left:1px solid #4c4c4c; }

.navbar-default{ background:#fff; border-radius:0; min-height:auto; border-top:none; border-left:none; border-right:none; margin-bottom:0; z-index:20; width:100%; }
.navbar-default a.navbar-brand{ margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; height:auto; }
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:focus{ text-transform:uppercase; font-size:15px; padding:22px 18px; color:#353537; }
.navbar-default .navbar-nav > li > a:hover{ color:#e51837; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { background:none; color:#e51837; }
.navbar-default .navbar-nav > .active > a:before{ background: #e51837 none repeat scroll 0 0; content: ""; display: block; height: 16px; left: 0; position: absolute; top: 24px; width: 3px; }
.dropdown-menu > li > a{ text-transform:uppercase; font-size:15px; padding:10px; color:#353537; }
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{ background:none; color:#777; }
.dropdown:hover .dropdown-menu {display: block;}

.carousel{ padding-top:100px; }
.carousel .item{ text-align:center; }
.carousel .item img{ display:inline-block;}
.carousel-caption { z-index: 10; text-align:left; background:rgba(229, 24, 55, 0.7); padding:20px; width:30%; bottom:60px; }
.carousel-caption h1{ font-size:28px; line-height:30px; margin:10px 0; }
.carousel-caption p { margin-bottom: 20px; font-size: 16px; }

section.aboutus{ padding:40px 0 0; }
section.aboutus h3{ text-transform:uppercase; font-family:"robotobold_condensed",Arial, Helvetica, sans-serif; text-align:center; font-size:22px; }
section.aboutus h2{ text-transform:uppercase; font-family:"robotobold_condensed",Arial, Helvetica, sans-serif; font-size:34px; position:relative; display:inline-block; vertical-align:middle; margin:0; padding:10px 0; margin:0 0 10px;}
section.aboutus h2:before{ -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none;  border-color: #e51837 -moz-use-text-color #e51837 #e51837; border-image: none; border-style: solid none solid solid; border-width: 2px medium 2px 2px; content: ""; display: block; height: 46px; left: -18px; position: absolute; top: 0; width: 9px; }
section.aboutus h2:after { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none;   border-color: #e51837 #e51837 #e51837 -moz-use-text-color; border-image: none; border-style: solid solid solid none; border-width: 2px 2px 2px medium; content: ""; display: block; height: 46px; position: absolute; right: -18px; top: 0; width: 9px; }
section.aboutus p{ font-size:14px; }

section.product{ padding:60px 0; background:#f4f4f4; position:relative; }
section.product .title{ border-left: 9px solid #e51837; display: inline-block; font-weight: 900; padding-left: 22px; position: relative; text-transform: uppercase; }
section.product .title h3{ margin:0; padding:5px 0 0; font-family:"robotolight",Arial, Helvetica, sans-serif; font-size:18px; }
section.product .title h2{ margin:0; padding:5px 0; font-family:"robotobold_condensed",Arial, Helvetica, sans-serif; font-size:30px; }
section.product h2{ border-left: 5px solid #e51837; padding-left: 12px; font-family:"robotobold",Arial, Helvetica, sans-serif; font-size:20px; text-transform:uppercase; margin:0 0 30px 0; }
section.product ul{ color:#e51837; }
section.product ul li p{ color:#21282e; }
section.product p{ font-size:14px; text-align: justify;}
section.product .item { position:relative; overflow:hidden; }
section.product .item .info{ background: #21282e none repeat scroll 0 0; bottom: -100%; color: #656c72; font-size: 12px; left: 0; line-height: 28px; padding: 14px 20px; position: absolute; right: 14px; transition: all 0.25s ease 0s; width:100%; }
section.product .item:hover .info { bottom: 0; }
section.product .item .info span.title a{ font-family:"robotolight",Arial, Helvetica, sans-serif; font-size:14px; color:#fff; }
section.product .item .info span.title{ padding-left:10px; border-left:6px solid #e51837; }
section.product .item .info span.category{ text-transform:uppercase; text-align:right;  }
section.product .item .info span.category a{ font-family:"robotolight",Arial, Helvetica, sans-serif; font-size:14px; color:#a5acb0; float:right; }
section.product ul.product-filter li{ font-family:"robotobold_condensed",Arial, Helvetica, sans-serif; padding:0 20px; text-transform:uppercase; }
section.product ul.product-filter li:first-child{ padding-left:0; }
section.product ul.product-filter li a.active{ border-left: 3px solid #e51837; color: #e51837; padding-left: 12px; }
section.product .item-hover{ margin-bottom:30px; position:relative; }
section.product .item-hover .overlay{ background: rgba(255, 66, 41, 0.87); position: absolute; bottom:0; left:0; right:0; top:0; transition: all 0.25s ease 0s; visibility: hidden; opacity: 0; }
section.product .item-hover .content-wrapper{  height: 100%; left: 14px;position: absolute; right: 14px; top: 0; transition: all 0.25s ease 0s; visibility: hidden;  opacity: 0; bottom:30px; }
section.product .item-hover .content-wrapper .content{ color: #fff;  font-size: 14px; font-weight: 700; line-height: 17px; padding: 12px 24px 0; position: relative; text-align: center; text-transform: uppercase; top: 40%; transform: translateY(-50%); }
.portfolio .content span { display: block; margin-bottom: 24px; }
section.product .item-hover:hover .overlay, 
section.product .item-hover:hover .content-wrapper {  opacity: 1; visibility: visible; }
.ssba div{text-align: center!important;}

section.product .products .item-product{ background:#FFFFFF; border:1px solid #EEEEEE; box-shadow:#DDDDDD 0 0 5px; color:#686F74; display:block;  list-style:none; margin:5px; overflow:hidden; padding:0; text-align:center; vertical-align:middle; }
.products div img{width: 100%; vertical-align:middle;}


section.default{ position:relative; padding-top:100px; }
section.default .block-image{ position:absolute; bottom:30%; left:27%; }
section.default .block-image .title{ background:#21282e; color:#fff; display:table; font-size:30px; text-transform:uppercase; padding:0 15px; font-family:"robotobold",Arial, Helvetica, sans-serif; }
section.default .block-image .breadcrumb{ background:#fff; border-radius:0; display:table; padding:4px 14px; font-size: 14px; color: #21282e; }
section.default .block-image .breadcrumb li.active{ color: #e51837; }

section.services{ position:relative; padding:60px 0; }
section.services .content{ position:relative; }
section.services .content h3{ border-left:3px solid #e51837; padding-left:10px; text-transform:uppercase; }
section.services .content hr { border-top:1px solid #e7e7e8; }
section.services .content p{ font-family:"robotolight", Helvetica, Arial, sans-serif; line-height:26px; font-size:14px; text-align: justify; }

section.contactus{ position:relative; padding:60px 0; }
section.contactus .content h2{ font-size:24px; border-left:8px solid #e51837; padding-left:15px; text-transform:uppercase; font-family:"robotobold",Arial, Helvetica, sans-serif; }
section.contactus .content p{ font-family:"robotolight", Helvetica, Arial, sans-serif; font-size:14px; line-height:26px; }
section.contactus .content ul li .fa-li{ color:#e51837; font-size:28px; }
section.contactus .content ul li { color:#656c72; padding:5px 0 10px 0; margin:10px 0 10px; vertical-align:middle; border-bottom:1px solid #e6e6e6; }
section.contactus .content textarea{ min-height:150px;}

section.product .clients .item-client{ background:#FFFFFF; border:1px solid #EEEEEE; box-shadow:#DDDDDD 0 0 5px; color:#686F74; display:block;  list-style:none; margin:5px; overflow:hidden; padding:0; text-align:center; vertical-align:middle; }
.clients div img{width: 100%; }

footer.footer{ padding:60px 0 0; background:#21282e; color:rgba(255, 255, 255, 0.8); }
footer.footer a{ color:rgba(255, 255, 255, 0.8); font-size : 12px;}
footer.footer p{ font-size:12px; }
footer.footer h4{ border-left: 3px solid #e51837; font-family:"robotobold_condensed",Arial, Helvetica, sans-serif; line-height: 17px; margin-bottom: 24px; padding-left: 12px; position: relative; text-transform: uppercase; color:#fff; }
footer.footer .copyright{ background:none; text-align:center; line-height:78px; margin:30px 0 0; font-size : 10px; }
footer.footer .widget { font-size : 12px; }
footer.footer .widget ul.medsos{ list-style:none; margin:0; padding:0; }
footer.footer .widget ul.medsos li{ display:inline-block; position:relative; margin:0 5px; }
footer.footer .widget ul.medsos li:first-child{ margin-left:0; }
footer.footer .widget ul.medsos li .fa{ font-size:24px; }
footer.footer .widget ul{ list-style:none; margin:0; padding:0; }
footer.footer .widget ul li{ padding:5px 0; width:49%; display:inline-block; }

#back-to-top { right: 40px; top: auto; z-index: 1; }
#back-to-top.affix { bottom: 40px; }
#back-to-top .btn.btn-primary { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; border: 2px solid transparent; border-radius: 3px; color: #fff; font-size: 18px;  height: 36px; opacity: 0.5; padding: 0; width: 36px; outline:none; }
#back-to-top .btn.btn-primary:hover {  color: #fff; opacity: 1; }

.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
.col-xs-15 { width: 20%; float: left; }
@media (min-width: 768px) { 
	.col-sm-15 { width: 20%; float: left; } 
}
@media (min-width: 992px) { 
	.col-md-15 { width: 20%; float: left; }
}
@media (min-width: 1200px) {
    .col-lg-15 { width: 20%; float: left; }
}