@import "font.css";
@import "owl.carousel.css";

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html, body{width: 100%; height: 100%;}
body{font-family: 'Source Sans Pro', sans-serif;}
body{background-color: #5a585b; }
img{max-width: 100%;}
p{color: #fff;}

.tab{width: 15px; display: inline-block; }
.band{height: 100%; padding-top: 50px;}
.fill-background{background-position: center !important; background-size: cover !important;}
.title{ position: relative; font-family: bebas_neueregular; color: #ff7733; font-size: 3em;}
.page-title{font-family:bebas_neueregular; padding:10px 0; margin-bottom:40px; font-size:4em; color:#fff; background-color: #ff7733; text-transform: uppercase; text-align: center;}
.dm-orange{color: #ff7733;}
.flex-contain{display: flex; align-items: center;}
.b-lazy { -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; max-width: 100%; opacity: 0; }
.b-lazy.b-loaded { opacity: 1; }
.shadowfilter:hover { -webkit-filter: drop-shadow(0 0 10px rgba(173, 1, 1, 1)); filter: drop-shadow(0 0 10px rgba(173, 1, 1, 1)); -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=0, Color='rgba(173, 1, 1,1)')"; filter: progid: DXImageTransform.Microsoft.Shadow(Strength=10, Direction=0, Color='rgba(173, 1, 1,1)'); transition: all 0.5s; cursor:pointer; }

nav.navbar{ width:100%; background-color: #fff; border-radius: 0 !important; z-index: 1000;}
.navbar-nav{width: 100%; text-align: center;  -webkit-backface-visibility: hidden;}
.navbar-nav > li{padding: 25px 5px;}
.navbar-nav > li > a{ position: relative; padding:10px 0; color:rgb(51,51,51); text-transform: uppercase; font-size:21px; font-family: bebas_neueregular; background-color: transparent !important;}
.navbar-nav > li.active > a, .navbar-nav > li:hover > a{background-color: transparent;}
.navbar-nav > li.active > a:after, .navbar-nav > li:hover > a:after{ content: ''; position: absolute; width: 100%; bottom: 5px; left: 0; background-color: #ff7733; height: 2px;}
.navbar .contact-link{display: block; text-decoration: none; color: rgb(51,51,51);}
.navbar .contact-link *{color: rgb(51,51,51);}
.navbar-toggle{margin-top: 20px;}
.navbar-toggle .icon-bar{background-color: #000;}
.navbar-brand{float: none; margin:0 !important; padding: 0;}
.navbar-brand img{max-height: 90px; padding:10px 0;}
nav .contact-image{padding-top: 20px;}

.main > section{padding:25px 0;}

/* Page-Top */
#intro{padding: 0;}
#intro.loading{visibility: hidden;}
#intro .position-r{position: relative; height: 100%; padding-top: 91px;}
#intro [class^=intro-]{font-family: "bebas_neueregular"; letter-spacing: 2px; text-transform: uppercase;}
#intro [class^=intro-] div{}
#intro [class^=intro-] span{display:inline-block; padding:0 20px; margin-bottom:10px; font-size:4em; background-color: #ff7932; color:#fff;}

#intro .intro-top-left{ left: 0; top: 0;  padding-top: 20px;}
#intro .intro-top-left span{min-width: 350px;}
#intro .intro-top-center{ margin:0 auto; display: inline-block; padding-top: 20px;}
#intro .intro-bottom-right{ position: absolute; width:auto; right: 0; bottom: 0; text-align: right; }
#intro .intro-bottom-right span{padding-right: 40px;}
/* Products */
#products{background-color: #fff; padding-top: 0;}
#products .media{margin-bottom: 40px;}
#products .buttons a{display: inline-block; padding:10px; margin-right:10px; border-radius:5px; color:#fff; background-color: #ff7733; text-transform: uppercase;}
#products .buttons a:hover{text-decoration: none;}
.products-carousel{min-height: 500px;}
.products-carousel .item-box{width: 24%; display: inline-block;}
.products-carousel .item-name{ font-size: 12px;}
.products-carousel .item-box:hover .item-name{color: red;}
.products-carousel .item-image{height: 200px; padding: 20px; display: flex; align-items: center;}
.products-carousel .item-image img{max-height: 100%; width: auto; margin: 0 auto;}
/*.products-carousel img{display:inline!important; width:auto !important; max-height: 100px; padding: 10px;}*/
.products-carousel .tooltip-inner{text-align: left; max-width: 350px;}
.products-carousel .tooltip-inner{text-transform: capitalize;}
.products-carousel .tooltip-inner .tooltip-data{min-width: 230px;}
.products-carousel .tooltip-inner .tooltip-data > div > div:last-child{text-align: right;}
.products-carousel .tooltip-inner p{margin:5px 0; text-transform: capitalize;}
.owl-carousel .owl-stage-outer{ padding-bottom: 100px;}
.owl-controls .owl-dots{text-align: center;}
.owl-controls .owl-dot{display: inline-block; padding: 5px 10px; font-size:1.2em; color: #ffae4d; background-color: #fff; border-radius: 50px; margin: 10px;}
.owl-controls .owl-dot.active{background-color: #ff7733; color: #fff;}
.owl-controls .owl-dot:hover, .owl-controls .owl-dot.active{color: #fff; background-color: #ff7733; cursor: pointer;}

.carousel{margin-bottom: 40px;}
.carousel-content h3{text-align: center; color: #fff;}
.carousel-indicators{bottom: -30px !important;}

.download-button{margin-top:20px; max-width: 150px;}
.media-body{font-size: 1.25em; line-height: 1.25;}
/* Client and Projects */
.b-lazy{opacity: 1; background: url("../img/ajax-loader.gif") no-repeat; background-size: auto !important; background-position: center !important; }
.b-lazy.b-loaded{background-size: cover !important;}
#clients{padding: 0;}
#clients .page-title{margin-bottom: 0;}
.clpr{margin: 0; }
.clpr > div{padding: 0; min-height: 400px; display: table;}
.clpr .box{ position: relative; padding: 20px; background-color: rgba(0,0,0,0.75); cursor: pointer; display: table-cell; vertical-align: bottom;}
.clpr .box p{line-height: 1;}
.clpr .box .title{ position: absolute; top: 20px; left:20px; right:20px; line-height: 1; margin-bottom: 20px;}
.clpr .box .content{ display: table-cell; vertical-align: bottom; padding-top:150px; color: #ffffff;}
.clpr .box:hover{background-color: transparent;}
.clpr .box:hover *{color: #ff7932;}
.clpr-mobile{background: url("../img/BonifacioGlobalCity.jpg") fixed no-repeat; background-size: cover; background-position: center;}
.clpr-mobile .list-proj{padding: 10px; margin: 0; color: #fff;}

/* Eco Solutions */
#eco-solutions{padding-top: 0; padding-bottom: 80px; font-size: 1.25em; line-height: 1.25;}
#eco-solutions .title{font-size: 2em; margin-bottom: 20px;}
#eco-solutions img{min-width: 100px;}
#eco-solutions .media{margin-bottom: 20px;}


/* Contact Us */
#contact-us{padding:0; background-color: #303026;}
#contact-us .page-title{background-color: transparent; margin-bottom: 0;}
#contact-us .details{padding: 20px 0;}
#contact-us .details *{color: #fff; font-size: 18px;}
#contact-us .details p{margin-bottom: 0px;}
#contact-us .details p:nth-child(n+2){font-size: 0.75em;}
#contact-us .details .glyphicon{color: #cc2f1e;}

/* Footer */
footer{padding:20px; background-color: #ff7733;}
footer *{color: #fff;}
footer .site-map ul{margin: 0;}
footer .site-map li{display: inline-block; margin:0 20px; list-style-type: none;}
footer .site-map a{font-size:1em; color: #fff; text-decoration: none;}

@media all and (min-width: 768px){
   .navbar-nav > li{display: inline-block; float: none;}
   #products .media .media-body{display: block;}
}

@media all and (max-width: 767px){
   #intro [class^=intro-] span{font-size: 2em;}
   #intro .intro-top-left span{min-width: 200px;}
   #eco-solutions .flex-contain{display: block; margin: 0;}
   footer .site-map li{display: block; text-align: left;}
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}