/*
=========================================

Project Name: Rocktec
Creation date: 27 Sep 2018
Last modified: 8 Oct 2018
Description: 
Version: 1.0
Author: Steve Hopper | steve@xeno.co.nz
Company: xeno web development
Company URI: http: //www.xeno.co.nz

=========================================
*/


/*
	
	colours
	purple #8b2890
	cyan #00c0e8
	green #50b848
	blue #1a3872
*/

body { font-family: 'Open Sans Condensed', sans-serif;font-size: 14px;font-weight:200;line-height: 1.428571429;color: #333;background-color: #FFF;/* margin-top:30px;  */}
h1 { font-size:28px;}
h2 { font-family: 'Open Sans Condensed', sans-serif;font-size:20px; }
h3 { font-family: 'Open Sans Condensed', sans-serif;margin-bottom:15px; }
h4 {}
h5 {}
a { color:#333;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out; }
a:hover { color:#000;}

.lgrey { background-color:#f2f2f2; }
.mgrey { background-color:#d1d4d4; }
.dgrey { background-color:#252525; }
.cyan { background-color:#00c0e8; }
.padded { padding:40px 15px; }

.nopad { padding-left:0;padding-right:0;}

.navbar { margin-bottom:0; }



.nav>li { font-size:20px;font-weight:700;border-bottom:1px solid #e5e5e5; }

.navbar-default { min-height:190px;min-height:130px;background:transparent;border:0; }
.navbar>.container .navbar-brand {width:270px;text-align:left;/* margin-top:10px; */}
.navbar-nav { /* min-height:66px; */}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {color: #00c0e8;background-color: #FFF;}
.navbar-default .navbar-nav>li>a { color: #777; }
.navbar-default .navbar-nav>li>a:hover { background:#fff;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {background-color: #fff;color: #000;}

.navbar-default .navbar-nav>.steel-active>a { color:#8b2890;border-bottom:0; }
.navbar-default .navbar-nav>.rock-active>a { color:#1a3872;border-bottom:0; }
.navbar-default .navbar-nav>.timber-active>a { color:#50b848;border-bottom:0; }
/* used on phone only */
.navbar-inverse { background-color:#121232;border-color:#121232; }
.navbar-inverse .navbar-nav { background-color:#FFF;margin-top:0px;border:0; }
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {color: #CCC;background-color: #0876be;}
.navbar-inverse .navbar-toggle {/* margin-left:auto;margin-right:auto; */float:none;border-color: #FFF;margin-top:12px;margin-bottom:12px;}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {background-color: #FFF;}
.navbar-inverse .navbar-toggle:hover .icon-bar, .navbar-inverse .navbar-toggle:focus .icon-bar {background-color: #0876be;}
.navbar-inverse .navbar-toggle .icon-bar {background-color: #FFF;}
.navbar-inverse .navbar-nav>li>a { padding-top:15px;padding-bottom:15px;color:#000; }
.navbar-inverse .navbar-nav li a:hover  { color:#0876be; }
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {background-color: transparent;color: #0876be;}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {background-color: #FFF;color: #0876be;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {margin-top:62px;border-top:0;border-color: transparent;background-color:#FFF;}
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu { margin-bottom:20px; }
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {color: #9d9d9d;font-size: 16px;}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {color: #000;background-color: transparent;}

.nav-extension { position:relative;margin-top:15px;list-style: none; }
.nav-extension li { display:block;margin-left:-40px; }
.nav-extension li a { display:block;/* font-weight:700; */color:#777;padding:10px 0px;text-decoration: none; }
.nav-extension li a:hover, .nav-extension li a:focus { color:#000; }
.nav-extension li.active a { color:#00c0e8; }


.nav-pills { margin-bottom:0px;padding:15px 0px; }
.nav-pills>li {margin-bottom:0px;width:100%;border-bottom:0;}
.nav-pills>li+li {margin-left: 0px;}
.nav-pills>li>a {font-size:18px;text-decoration:none;text-transform:none;font-weight:600;}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { color:#FFF;background-color: #00c0e8;}
.nav-pills>li.timber-active>a {color: #50b848;border-bottom: 4px solid #50b848;}
.nav-pills>li.steel-active>a {color: #8b2890;border-bottom: 4px solid #8b2890;}


.btn-danger, .btn-subscribe { background-color:#FF0000;color:#FFF;border:0;text-transform: uppercase;font-weight:700; }
.btn-danger:hover, .btn-danger:focus, .btn-subscribe:hover, .btn-subscribe:focus { color:#FFF;background-color:#000;border:0; }
.btn-design, .btn-steel, .btn-materials-handling, .btn-environmental { color:#FFF;padding:8px 25px; }
.btn-design:hover, .btn-design:focus, .btn-steel:hover, .btn-steel:focus, .btn-materials-handling:hover, .btn-materials-handling:focus, .btn-environmental:hover, .btn-environmental:focus { color:#FFF; }

.btn-design { background-color:#00b1de; }
.btn-steel { background-color:#5e2e91; }
.btn-materials-handling { background-color:#1e1e4f; }
.btn-environmental { background-color:#00ab4f; }

.btn-design:hover, .btn-design:focus { background-color:#0195bb; }
.btn-steel:hover, .btn-steel:focus { background-color:#47226f; }
.btn-materials-handling:hover, .btn-materials-handling:focus { background-color:#121232; }
.btn-environmental:hover, .btn-environmental:focus { background-color:#018a40; }

.social-links {position:absolute;top:36px;right:0px;height:65px;}
.fa-linkedin-square {font-size: 24px;margin-left: 5px;margin-top: 12px;color:#999;}
.fa-linkedin-square:hover { color:#000; }
.fa-youtube-square {font-size: 24px;margin-left: 5px;margin-top: 12px;color:#999}
.fa-youtube-square:hover { color:#000; }

.breadcrumb {padding: 20px 0px;margin-bottom: 0px;list-style: none;background-color: transparent;border-radius: 0;}
.breadcrumb li.active { color:#333;font-weight:700;font-size:16px; }
.breadcrumb li a { font-weight:700;color:#999;font-size:16px; }

.page-header { background-color:#FFF;padding:20px 0px;margin:0;font-size:38px;font-family: 'Open Sans Condensed', sans-serif;font-weight:700;color:#000;text-transform: uppercase;border-bottom:0; }
.sub-header { font-size:24px;font-family: 'Open Sans Condensed', sans-serif;font-weight:400;color:#333;border-top:1px dotted #CCC;padding-top:40px;margin-top:40px;margin-bottom:30px; }

.hero, .hero.materials-handling, .hero.steel, .hero.environmental, .hero.innovation, .hero.hero-default { /* min-height:288px;min- */height:260px; }
.hero { background-image:url(../images/rock-banner-min.jpg);background-repeat: no-repeat;background-color:#1a3872; }
.hero.materials-handling { background-image:url(../images/rock-banner-min.jpg);background-repeat: no-repeat;background-color:#1a3872; }
.hero.steel { background-image:url(../images/purple-banner-min.jpg);background-repeat: no-repeat;background-color:#8b2890; } 
.hero.environmental { background-image:url(../images/timber-image-min.jpg);background-repeat: no-repeat;background-color:#50b848; } 
.hero.hero-default { background-image:url(../images/banner-cyan-min.jpg);background-repeat: no-repeat;background-color:#00c0e8; } 
.hero blockquote { font-size:26px;line-height:30px;color:#FFF;margin-top:40px;padding-right:0px;border-left:0px; }
.hero blockquote footer { font-size:14px;line-height:30px;color:#FFF;}

.design-sector, .steel-sector, .rock-sector, .timber-sector { height:200px; }
.design-sector { background:#00c0e8; }
.steel-sector { background:#8b2890; }
.rock-sector { background:#1a3872; }
.timber-sector { background:#50b848; }
.design-sector .sector-image, .steel-sector .sector-image, .rock-sector .sector-image, .timber-sector .sector-image { height:200px; }
.design-sector .sector-heading, .steel-sector .sector-heading, .rock-sector .sector-heading, .timber-sector .sector-heading { font-size:22px;font-weight:700; }
.design-sector .sector-text, .steel-sector .sector-text, .rock-sector .sector-text, .timber-sector .sector-text { font-size:16px;line-height:22px;overflow:hidden;height:200px;background-image:url(../images/logo-wheel.png);background-repeat: no-repeat; }
.design-sector .sector-text { background-position: -35px -15px; }
.steel-sector .sector-text { background-position: 15px 15px; }
.rock-sector .sector-text, .timber-sector .sector-text, .steel-sector .sector-text, .design-sector .sector-text { background-position: 170px 80px; }
.design-sector .sector-image { background-image:url(../images/design-build-image.jpg);background-size:cover;background-repeat:no-repeat;background-position:50% 50%; }
.steel-sector .sector-image { background-image:url(../images/steel-image.jpg);background-size:cover;background-repeat:no-repeat;background-position:50% 50%; }
.rock-sector .sector-image { background-image:url(../images/rocktec-image.jpg);background-size:cover;background-repeat:no-repeat;background-position:50% 50%; }
.timber-sector .sector-image { background-image:url(../images/timber-image.jpg);background-size:cover;background-repeat:no-repeat;background-position:50% 50%; }
.sector-text { padding:30px;color:#FFF; }


.cs-header { padding:30px 0px; }
.cs-header h1 { /* color:#1a3872;font-weight:700; */ }

.prod-image, .cat-image, .cs-image { margin-bottom:30px;height:auto; }

.carousel-control {position: absolute;top: 0;left: 0;bottom: 0;width: 15%;opacity: 0.5;filter: alpha(opacity=50);font-size: 20px;color: #fff;text-align: center;text-shadow: 0 1px 2px rgba(0,0,0,0.6);}

.carousel-control.right {left: auto;right: 0;background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0%), color-stop(rgba(0, 0, 0, 0.5) 100%));background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=1);}
.carousel-control {opacity: 1;filter: alpha(opacity=100);}
.carousel-control.left, .carousel-control.right {background-image: none;}
.carousel-control span.right, .carousel-control span.left {position: absolute;z-index: 5;display: inline-block;bottom: 10%;right: 25%;width: 43px;height: 43px;}
.carousel-control span.right, .carousel-control span.left {width: 53px;height: 53px;}

#footer { background-color:#4d4d4f;padding:30px 0px;color:#FFF;  }
#footer a { color:#FFF; }
.footer-logo { margin-left:-10px;}
.footer-menu { margin-top:0px;list-style: none;padding:0; }
.footer-menu li { /* display:inline-block */;margin-left:0;padding-left:0; }
.footer-menu li a { color:#FFF;text-transform: none;font-size:14px;font-weight:400;/* padding:10px 15px; */ }
.xeno { background-color:#4d4d4f;text-align:center;/* border-top:1px solid #FFF; */padding-top:5px;padding-bottom:5px; }



@media (min-width: 768px) {
	
	h1 { font-size:28px;}
	h2 { font-size:18px;margin-bottom:25px;  }
	h3 { font-size:20px; }
	
	/* used on ipad only */
	.navbar-toggle { margin-top:40px;margin-right:30px;}
	.navbar-default .navbar-toggle { border-color: #000;color:#000;font-weight:700; }
	.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color:#000;color:#FFF;}
	.navbar-collapse { margin-top:74px;border-top:0;border-color: transparent;background-color:#FFF;} 
	
	.navbar>.container .navbar-brand {width:300px;height:90px;text-align:left;margin-top:14px;}
	.navbar-nav {margin-top:0px;float:none;}
	.nav-pills>li { margin-bottom:0px;width:auto;border-bottom:0;/* border-right:1px solid #999; */ 	}
	.nav-pills>li>a {font-size:16px;padding:10px 30px; }
	
	.search-form { position:absolute;right:30px;top:10px;/* width:200px; */ }

	.hero1 { left:130px;}
	.hero1 blockquote { width:600px;font-size:20px;line-height:28px;color:#FFF;margin-top:40px;padding-right:150px;border-left:0px; }
	.hero1 blockquote footer { font-size:14px;line-height:30px;color:#FFF;}
	
	.design-sector, .steel-sector, .rock-sector, .timber-sector { height:200px; }
	.design-sector { background:#00c0e8; }
	.steel-sector { background:#8b2890; }
	.rock-sector { background:#1a3872; }
	.timber-sector { background:#50b848; }
	.design-sector .sector-image, .steel-sector .sector-image, .rock-sector .sector-image, .timber-sector .sector-image { height:200px; }
	.design-sector .sector-heading, .steel-sector .sector-heading, .rock-sector .sector-heading, .timber-sector .sector-heading { font-size:20px;font-weight:700; }
	.design-sector .sector-text, .steel-sector .sector-text, .rock-sector .sector-text, .timber-sector .sector-text { font-size:14px;line-height:18px;overflow:hidden;height:200px;background-image:url(../images/logo-wheel.png);background-repeat: no-repeat; }
	.design-sector .sector-text { background-position: -35px -15px; }
	.steel-sector .sector-text { background-position: 15px 15px; }
	.rock-sector .sector-text, .timber-sector .sector-text, .steel-sector .sector-text, .design-sector .sector-text { background-position: 170px 80px; }
	.design-sector .sector-image { background-image:url(../images/design-build-image.jpg);background-size:cover;background-repeat:no-repeat;background-position:50% 50%; }
	.steel-sector .sector-image { background-image:url(../images/steel-image.jpg);background-size:cover;background-repeat:no-repeat;background-position:50% 50%; }
	.rock-sector .sector-image { background-image:url(../images/rocktec-image.jpg);background-size:cover;background-repeat:no-repeat;background-position:50% 50%; }
	.timber-sector .sector-image { background-image:url(../images/timber-image.jpg);background-size:cover;background-repeat:no-repeat;background-position:50% 50%; }
	.sector-text { padding:30px;color:#FFF; }
	
	.hero, .hero.materials-handling, .hero.steel, .hero.environmental, .hero.innovation, .hero.hero-default { height:289px; }
	
 	.social-links {right:80px;} 
	.prod-image, .cat-image, .cs-image { margin-bottom:30px;height:134px; }
	.project-image { margin-bottom:30px;height:190px; }			
	.footer-menu { margin-top:0px;list-style: none;padding:0; }
	.footer-menu li { /* display:inline-block */;margin-left:0; }
	.footer-menu li a { color:#FFF;text-transform: none;font-size:14px;font-weight:400;padding:10px 15px 10px 0px; }
}

@media (min-width: 992px) {
	
	h2 { font-size:20px;margin-bottom:25px;line-height:1.3;  }
	.nav>li { font-size:16px;border-bottom:0; }
	
	.navbar-nav {float:right;margin-top:60px;margin-right: -15px;}

	.navbar-default .navbar-nav>li>a {font-family: 'Open Sans Condensed', sans-serif;color: #777;padding-top:15px;padding-bottom:15px;border-bottom:6px solid #FFF; }
	.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {color: #00c0e8;background-color: transparent;border-bottom:6px solid #00c0e8;}
	.navbar-default .navbar-nav>li>a:hover { color:#000;border-bottom:6px solid #FFF;background-color:#FFF;}
	.nav>li>a {padding: 10px 20px;}
	
	.navbar-collapse { width:auto;background-color:transparent;}
	.br { border-right:1px solid #CCC; }
	.br-d { border-right:1px solid #999; }
	.navbar-default .navbar-nav>li>a.last { padding-right:0px; }
	
	.navbar-default .navbar-nav>.steel-active>a, .navbar-default .navbar-nav>.steel-active>a:hover { color:#8b2890;border-bottom:6px solid #8b2890; }
	.navbar-default .navbar-nav>.rock-active>a, .navbar-default .navbar-nav>.rock-active>a:hover { color:#1a3872;border-bottom:6px solid #1a3872; }
	.navbar-default .navbar-nav>.timber-active>a, .navbar-default .navbar-nav>.timber-active>a:hover { color:#50b848;border-bottom:6px solid #50b848; }
	
	.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {background-color: #000;color: #FFEA00;border-bottom: 6px solid #FFF;}
	.navbar-collapse { margin-top:0px; }
 	 	
 	.nav-extension { position:absolute;right:240px;right:54px;top:0px;list-style: none; }
 	.nav-extension li { display:inline-block;margin-left:0px; }
 	.nav-extension li a { display:block;padding:0px;padding-left:15px; }
 	
 	
 	.nav-pills>li>a { font-size:18px;padding:10px 40px; }
 	.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { color:#00c0e8;border-bottom:4px solid #00c0e8;background-color: transparent; }
 	
 	.social-links {position:absolute;top:0px;right:0px;height:65px;}
	
	.hero, .hero.materials-handling, .hero.steel, .hero.environmental, .hero.innovation, .hero.hero-default { height:320px; }
/* 	.hero { min-height:320px; } */
	.hero1 { left:130px;}
	.hero1 blockquote { width:600px;font-size:24px;line-height:30px;color:#FFF;margin-top:60px;padding-right:150px;border-left:0px; }
	.hero1 blockquote footer { font-size:14px;line-height:30px;color:#FFF;}

	.hero blockquote { font-size:28px;line-height:32px;color:#FFF;margin-top:60px;padding-right:100px;border-left:0px; }
	.hero blockquote footer { font-size:14px;line-height:30px;color:#FFF;}
	.design-sector, .steel-sector, .rock-sector, .timber-sector { height:225px; }
	.design-sector .sector-image, .steel-sector .sector-image, .rock-sector .sector-image, .timber-sector .sector-image { height:225px; }
	.design-sector .sector-heading, .steel-sector .sector-heading, .rock-sector .sector-heading, .timber-sector .sector-heading { font-size:28px;font-weight:700;line-height:28px;margin-bottom:5px; }
	.design-sector .sector-text, .steel-sector .sector-text, .rock-sector .sector-text, .timber-sector .sector-text { font-size:16px;line-height: 1.428571429;overflow:hidden;height:225px;background-image:url(../images/logo-wheel.png);background-repeat: no-repeat; }
	
	.prod-image, .cat-image, .cs-image { margin-bottom:30px;height:200px; }
	.project-image { margin-bottom:30px;height:210px; }
}

@media (min-width: 1200px) {
	
	h1 { font-size:28px;font-weight:400; }
	
	
	.nav>li { font-size:20px; }
	.nav>li>a {padding: 10px 25px;}
	
	.hero1 { left:130px;}
	.hero1 blockquote { width:600px;font-size:28px;line-height:32px;color:#FFF;margin-top:60px;padding-right:150px;border-left:0px; }
	.hero1 blockquote footer { font-size:14px;line-height:30px;color:#FFF;}
	
	.nav-pills>li>a { font-size:20px;padding:10px 40px; }
	
	.rock-sector .sector-text, .timber-sector .sector-text, .steel-sector .sector-text, .design-sector .sector-text { background-position: 300px 80px; }
	
	.cat-image { height:220px; }
	.cat-image p { line-height:15px;margin-top:10px; }
	.project-image { margin-bottom:30px;height:225px; }
	
}