@charset "UTF-8";
/* Video Pro Responsive CSS*/

@font-face {
	font-family: 'Gotham';
	src: url('http://fonts.orcas.co.nz/Content/Fonts/Gotham-Book/Gotham-Book.otf') format('opentype'),		local('Gotham-Book');
	font-weight: 400;
	font-style: normal;}

@font-face {
	font-family: 'Gotham';
	src: url('http://fonts.orcas.co.nz/Content/Fonts/Gotham-Light/Gotham-Light.otf') format('opentype'),		local('Gotham-Light');
	font-weight: 100;
	font-style: normal;}

html.authed body { padding-top: 100px; }

body, html { color: #333; margin: 0; padding: 0; position: relative; height: 100%;}
body { font-size: 14px; font-family: 'Gotham', sans-serif; color: #333; font-weight:400; font-smoothing: antialiased; -webkit-font-smoothing: antialiased;}

.all {min-height: 100%; height: auto; padding-bottom: 50px; box-sizing: border-box; -moz-box-sizing: border-box; }
.no-image { background-image: none;}
body form { height: 100%;}

.authed .background-image { top: 220px; }


h1 { text-transform: uppercase; letter-spacing: 2px; font-size: 30px; font-weight: 100; line-height: 33px; }
h2 { text-transform: uppercase; letter-spacing: 1px; font-size: 24px; font-weight: 400; line-height: 25px; }
h3 {color: #f92a00; font-size: 22px; line-height: 25px; text-transform: uppercase; letter-spacing: 0.07em;}
p { font-size: 12px; line-height: 22px; text-align: justify;}
a { color: #f92a00; text-decoration: none; transition: color 0.3s; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; font-weight: 400 !important;}
a:hover { color: #000; text-decoration: none; }
a img { border: none; }

.image-viewer { overflow: hidden;}

#header-outer { height: 100px; background-color: #000;}
#header { max-width: 1200px; height: 100px; margin:auto;}

#logo { float: left; padding-top: 20px;}
#logo a { display: block; width: 320px; height: 60px;}
#logo a span { display: none;}

#linked-in { float: right; margin-top: 52px; width: 106px; }

#nav {float: right; margin-top: 40px; height: 30px; }
#nav ul#main { height: 30px; line-height: 20px; padding: 0; margin: 0 40px 0 0; }
#nav ul#main li { list-style: none; float: left; padding: 0 50px 0 0; margin: 0; height: 30px; font-weight: 400 !important;}
#nav ul#main li a { display: block; border-top: solid 3px #000; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; height: 14px; line-height: 14px; padding-top: 13px; transition: color 0.3s, border 0.3s; -webkit-transition: color 0.3s, border 0.3s; font-weight: 400 !important; }
#nav ul#main li a:hover,
#nav ul#main li.sel a { color: #f92a00; border-top: solid 3px #f92a00;}
#nav ul#main li.item.last { padding-right: 0;}

 /*MOBILE MENU MOBILE MENU MOBILE MENU!!*/
#header-outer-mobile { background-color: #000;}
#header-outer-mobile #header { height: 170px;}
#header-outer-mobile #logo {float: none !important; padding-top: 70px;}
#header-outer-mobile #logo a { margin: auto;}
#header-outer-mobile #logo a img { display: block; width: 100%;}
#header-outer-mobile #logo a span { display: none;}

#header-outer-mobile #menu-container .container { padding: 0;}
#header-outer-mobile #menu-container #menu { float: none; padding: 10px 40px; }
#header-outer-mobile #menu-container #menu ul { padding: 0; margin: 0; list-style: none;}
#header-outer-mobile #menu-container #menu ul li { line-height: 35px; list-style: none;}
#header-outer-mobile #menu-container #menu ul li a { color: #fff; letter-spacing: 1px; text-transform: uppercase; font-weight: 300; font-size: 15px; }
#header-outer-mobile #menu-container #menu ul li a:hover,
#header-outer-mobile #menu-container #menu ul li.sel a { text-decoration: none; color: #f92a00; }
#header-outer-mobile #menu-container #menu ul#main.menu li ul.childmenu { height: 0; overflow: hidden;  transition-property: height; transition-duration:0.5s; /* Safari */-webkit-transition-property: height; -webkit-transition-duration: 0.5s;}
#header-outer-mobile #menu-container #menu ul#main.menu li ul.childmenu.expanded { height: 109px;border-top: solid 1px #666; border-left: none; border-right: none;}

#header-outer-mobile #menu-container { position: fixed; left:0; top: -200px; right: 0; background-color: #000; z-index: 2000;}
#header-outer-mobile #menu-expander { height: 49px; cursor: pointer; display: block; margin: auto; line-height: 49px; background-color: #000; border: solid 1px #fff; border-left: none; border-right: none; padding: 0 45%;}
#header-outer-mobile #menu-expander span { text-align: center; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 17px;}
 /*END MOBILE MENU MOBILE MENU END MOBILE MENU!!*/

#home-banner { height: 450px;}
.home-slider { z-index: 1; position: relative; height: 450px; overflow: hidden; }
.home-slider .shadow { position: absolute; height: 30px; background-image: url('../images/header_shadow.png'); background-repeat: repeat-x; z-index: 20; left: 0; top: 0; right: 0;}
.home-slider .items .item { position: absolute; width: 100%; height: 450px; background: url("") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: 1;}
.home-slider .items .item .overlay { width: 960px; height: 550px; z-index: 50; margin: auto; position: relative; }
.home-slider .items .item .overlay .text { width: 450px; height: 550px; display: block; position: absolute; left: 0; top: 100px; z-index: 20; color: #fff; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; font-size: 50px; line-height: 50px; background: url('../images/black-trans.png'); padding: 20px;}
.home-slider .items .item .overlay .text .learn-more-button { font-size: 14px; border: 1px solid white; width: 200px; height: 50px; text-align: center; background-color: #f92a00; margin-top: 20px;}
.home-slider .items .item .overlay .text .learn-more-button:hover { background: none; border: 1px solid #f92a00;}

#home-squares { margin: 0 auto; max-width: 1200px;}
#home-squares .squares.col-md-12 { padding: 20px 0; margin: 0;}
#home-squares .squares .item img { width: 100%; overflow: hidden; position: relative; z-index:1;}
#home-squares .squares .item .image { position: relative; z-index: 1;}
#home-squares .squares .item .image .overlay {  position: absoltue; z-index: 10;display: block; background-color: #f92a00; opacity: 0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
#home-squares .squares .item:hover .image .overlay { opacity: 0.6;}
#home-squares .squares .item .title { border-top: solid 5px #fff; font-size: 26px; text-align: center; line-height: 70px; text-transform: uppercase; color: #fff; letter-spacing: 1px; font-weight: 100 !important; position: relative; transition: border 0.3s, color 0.3s; -webkit-transition: border 0.3s, color 0.3s; padding-bottom: 8px;}
#home-squares .squares .item:hover .title { border-top: solid 5px #f92a00; color: #f92a00;}
#home-squares .squares .item .title .diamond { width: 8px; height: 8px; position: absolute; left: 50%;  bottom: 0; background-color: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-left: -10px; display: block; transition: background-color 0.3s; -webkit-transition: background-color 0.3s;}
#home-squares .squares .item:hover .title .diamond { background-color: #f92a00;}

#solutions-squares { margin: 0 auto; max-width: 1200px;}
#solutions-squares .squares.col-md-12 { padding: 20px 0; margin: 0;}
#solutions-squares .squares .item img { width: 100%; overflow: hidden; position: relative; z-index:1;}
#solutions-squares .squares .item .image { position: relative; z-index: 1;}
#solutions-squares .squares .item .image .overlay {  position: absoltue; z-index: 10;display: block; background-color: #f92a00; opacity: 0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
#solutions-squares .squares .item:hover .image .overlay { opacity: 0.6;}
#solutions-squares .squares .item .title { border-top: solid 5px #000; font-size: 26px; text-align: center; line-height: 70px; text-transform: uppercase; color: #000; letter-spacing: 1px; font-weight: 100 !important; position: relative; transition: border 0.3s, color 0.3s; -webkit-transition: border 0.3s, color 0.3s; padding-bottom: 8px;}
#solutions-squares .squares .item:hover .title { border-top: solid 5px #f92a00; color: #f92a00;}
#solutions-squares .squares .item .title .diamond { width: 8px; height: 8px; position: absolute; left: 50%;  bottom: 0; background-color: #000; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-left: -10px; display: block; transition: background-color 0.3s; -webkit-transition: background-color 0.3s;}
#solutions-squares.squares .item:hover .title .diamond { background-color: #f92a00;}



#content { margin: 50px 0; }

#footer-outer { background-color: #000; padding: 20px 0;margin-top: -55px;}
.footer { max-width: 1200px; margin: auto; height: 15px; padding: 0 20px;}
.footer p,
.footer a { line-height: 15px; color: #777;}
.footer a:hover { color: #fff;}

/*FOOTER MENU*/
.footer ul#main { min-height: 15px; line-height: 15px; padding: 0; margin: 0;}
.footer ul#main li { list-style: none; float: left; padding: 0 20px; margin: 0; height: 15px; border-right: solid 1px #777}
.footer ul#main li a { display: block; color: #777; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; height: 15px; line-height: 15px; transition: color 0.3s; -webkit-transition: color 0.3s; font-weight: 400; }
.footer ul#main li a:hover,
.footer ul#main li.sel a { color: #fff; }
.footer ul#main li.item.first { padding-left: 0;}
.footer ul#main li.item.last { border-right: none;}
.footer .right p { text-align: right !important;}

@media screen and (max-width: 981px) {
#footer-outer { margin-top: -95px;}
.footer { height: 60px; outline:solid 1px red;}
.footer .left { text-align: center !important;}
.footer .right p { text-align: center !important;}
}

.logo-list { margin: 50px 0;}
.logo-list a { display: block; text-align: center; opacity: 0.5; transition: opacity 0.3s; -webkit-transition: opacity 0.3s;}
.logo-list a:hover { opacity: 1;}
.logo-list .fluid { border-top: solid 1px #555; border-bottom: solid 1px #555; margin-top: 20px; padding: 20px 0; }

.form { margin-top: 40px; width: 100%;}
.form .field { margin: 12px 0; width: 100%;}
.form .field .title { float: left; line-height: 30px; text-transform: uppercase; letter-spacing: 1px; font-size: 12px;max-width: 100px;}
.form .field .input { padding-left: 120px; width: 100%;}
.form .field .input input {width: 100%; border: solid 1px #333; padding: 5px; height: 30px; line-height: 20px; color: #333;}
.form .field .input textarea { width: 100%; border: solid 1px #333; padding: 5px; height: 130px; line-height: 20px; color: #333;}
.form .submit { margin-top: 15px; clear: both; width: 100%; height: 50px; }
.form .submit input { text-transform: uppercase; letter-spacing: 1px; border: solid 1px #333; color: #333; padding: 10px 20px; float: right; transition: border 0.3s, color 0.3s; -webkit-transition: border 0.3s, color 03.s; cursor: pointer; background-color: transparent;}
.form .submit input:hover { color: #f92a00; border: solid 1px #f92a00;}

@media screen and (max-width: 520px) {
	.form .field .title { float: none; width: 100%;}
	.form .field .input { padding-left: 0;}
}

/*PORTFOLIO CUSTOM MODULE*/
.portfolio-viewer .portfolio-list { border-top: solid 1px #999; padding-top: 20px; max-width: 1200px;}
.portfolio-viewer .portfolio-list .items { padding: 20px 0; margin: 50px 0 0 0;}
.portfolio-viewer .portfolio-list .items .item {padding-bottom: 20px;}
.portfolio-viewer .portfolio-list .items a.item  .image {position: relative; z-index: 1; height: 250px; background-size: cover;}
.portfolio-viewer .portfolio-list .items .image img {max-width: 100%;}
.portfolio-viewer .portfolio-list .items a.item .image .inner-image { height: 250px; opacity: 0; transition: opacity 0.3s; background-size: cover;}
.portfolio-viewer .portfolio-list .items a.item:hover .image .inner-image { opacity: 1; }
.portfolio-viewer .portfolio-list .items .item .title { border-top: solid 5px #333; font-size: 26px; text-align: center; line-height: 35px; text-transform: uppercase; color: #333; letter-spacing: 1px; font-weight: 100 !important; position: relative; transition: border 0.3s, color 0.3s; -webkit-transition: border 0.3s, color 0.3s; padding: 8px 0; height: 93px; overflow: hidden;}
.portfolio-viewer .portfolio-list .items .item:hover .title { border-top: solid 5px #f92a00; color: #f92a00;}
.portfolio-viewer .portfolio-list .items .item .title .diamond {  width: 8px; height: 8px; position: absolute; left: 50%;  bottom: 3px; background-color: #333; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-left: -10px; display: block; transition: background-color 0.3s; -webkit-transition: background-color 0.3s;}
.portfolio-viewer .portfolio-list .items .item:hover .title .diamond { background-color:#f92a00;}
.portfolio-viewer .portfolio-list #filter-tags { display: none; }

.portfolio-viewer .portfolio-item h2 { color: #f92a00; border-top: solid 2px #f92a00; display: block; padding-top: 5px; font-size: 15px; margin: 35px 0 15px 0;}
.portfolio-viewer .portfolio-item .details { padding-right: 50px; }
.portfolio-viewer .portfolio-item .details .tag { display: inline; font-size: 13px; text-transform: uppercase; line-height: 30px; margin: 10px 40px 10px 0;}
.portfolio-viewer .portfolio-item .details .tag a { color: #333;}
.portfolio-viewer .portfolio-item .details .tag a:hover { color: #f92a00;}
.portfolio-viewer .portfolio-item .gallery { margin-top: 20px;}
.portfolio-viewer .portfolio-item .gallery img { width: 100%; margin-top: 20px; border: solid 2px #f92a00;}
.portfolio-viewer .portfolio-item .next-prev { text-transform: uppercase; letter-spacing:1px; color: #000; height: 50px; clear: both; padding: 25px 0 50px 0; border-top: solid 1px #999; margin: 50px 0; }

.portfolio-viewer .portfolio-item .next-prev .prev a { display: block; height: 40px; line-height: 40px;background-image:url('../images/diamond_black.png'); background-repeat: no-repeat; background-position: left 13px; padding-left: 20px; color: #000;}

.portfolio-viewer .portfolio-item .next-prev .next a { display: block; height: 40px; line-height: 40px; float: right; background-image:url('../images/diamond_black.png'); background-repeat: no-repeat; background-position: right 13px; padding-right: 20px; color: #000;}

.portfolio-viewer .portfolio-item .next-prev .prev a:hover,
.portfolio-viewer .portfolio-item .next-prev .next a:hover {color: #f92a00; background-image: url('../images/diamond_orange.png');}

@media screen and (min-width: 768px) {
.portfolio-viewer .portfolio-list .items a.item  .image {height: 150px;} 
.portfolio-viewer .portfolio-list .items a.item .image .inner-image { height: 150px;}
.portfolio-viewer .portfolio-list .items .item .title {line-height: 25px; font-size: 15px; }
	}

@media screen and (min-width: 960px) {
.portfolio-viewer .portfolio-list .items a.item  .image {height: 200px;} 
.portfolio-viewer .portfolio-list .items a.item .image .inner-image { height: 200px;}
.portfolio-viewer .portfolio-list .items .item .title {line-height: 25px; font-size: 15px; }
}

@media screen and (min-width: 1200px) {
.portfolio-viewer .portfolio-list .items a.item  .image {height: 250px;} 
.portfolio-viewer .portfolio-list .items a.item .image .inner-image { height: 250px;}
.portfolio-viewer .portfolio-list .items .item .title {line-height: 35px; font-size: 26px; }
	}

.navigation { padding-bottom: 20px;}
.navigation .back { display: block; height: 40px; line-height: 40px;background-image:url('../images/diamond_black.png'); background-repeat: no-repeat; background-position: left 13px; padding-left: 20px; color: #000; }
.navigation .forward { display: block; height: 40px; line-height: 40px; float: right; background-image:url('../images/diamond_black.png'); background-repeat: no-repeat; background-position: right 13px; padding-right: 20px; color: #000; }

.product-gallery img { margin: 20px 0;}

.product-logo {height: 150px; float: left;}
.our-products-details img {  padding: 10px; float: left; max-width: 100%; height: auto;}
.our-products-details .product-gallery img { max-width: 100%; border: 2px solid #f92a00; padding: 0; margin-bottom: 20px;}

.modal-dialog { margin-top: 100px !important;}
.modal-content { padding: 0; background-color: transparent; border-radius: 0;}
.modal-content .modal-header { padding: 0; background-color: transparent; border-bottom: none;}
.modal-content .modal-header h4.modal-title { color: #fff;}
.modal-content .modal-header button { display: block; opacity: 1;}
.modal-content .modal-header button.close { color: #fff; margin: 2px 8px 0 0; opacity: 1;}
.modal-content .modal-header button.close:hover { opacity: 0.7;}
.modal-content .modal-body { padding: 0;}
.modal-content .modal-body .ekko-lightbox-container .ekko-lightbox-nav-overlay a.glyphicon.glyphicon-chevron-left { background-image: url('../images/arrow_left.png'); background-repeat: no-repeat; background-position: left center; text-indent: -9999px; }
.modal-content .modal-body .ekko-lightbox-container .ekko-lightbox-nav-overlay a.glyphicon.glyphicon-chevron-right { background-image: url('../images/arrow_right.png'); background-repeat: no-repeat; background-position: right center; text-indent: -9999px; }
.modal-content .modal-body .ekko-lightbox-container .ekko-lightbox-nav-overlay a.glyphicon.glyphicon-chevron-right:before,
.modal-content .modal-body .ekko-lightbox-container .ekko-lightbox-nav-overlay a.glyphicon.glyphicon-chevron-left:before { content: none;}