chtml, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0;font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
strong {font-weight: bold;}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {background: #fff; text-align: center;}
.content {width: 980px; margin: 0 auto;}
.clearfix:before, .clearfix:after { content: ""; display: table;}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
div {transition: all .2s ease-in-out;}
p, a {font-family: Neuropol, Helvetica, sans-serif; text-decoration: none; color: #676767;}
b {font-family: Neuropol, Helvetica, sans-serif;}
li {list-style-type: none; font-family: Neuropol, Helvetica, sans-serif;}
h1 {font-family: Neuropol, Helvetica, sans-serif;}
h2 {font-family: Neuropol, Helvetica, sans-serif; font-size: 30px;}
h3 {font-family: Neuropol, Helvetica, sans-serif; font-size: 21px !important; color: #484848}
#page-title {height: 130px; background: #6da1ac; margin-top: 137px; width: 100%;}
#page-title h1 {color: #fff; font-size: 30px; margin-top: 48px; text-transform: uppercase; float: left;}
#page-title .contact {float: right; font-size: 20px; border: 2px solid #fff; padding: 10px; margin-top: 41px;transition: all .2s ease-in-out;}
#page-title .contact:hover {border: 2px solid #6ebec4; color: #6ebec4;}
.no-margin {margin-left: 0 !important;}
.right input {float: right;}
.left input {float: left;}
::selection {color: #fff; background: #589d90;}
::-moz-selection {color: #fff; background: #589d90;}
/* Page Title
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#title {text-align: center; height: 128px; background: url(../images/title-line.png) repeat-x 0 65px;}
#title2 {text-align: center; height: 128px; background: url(../images/title-line.png) repeat-x 0 65px;}
#title h2 {text-transform: uppercase; color: #0063af; padding-top: 49px; width: 25%; background: #fff; margin: 0 auto; font-size: 24px; letter-spacing: 1px;}
#title2 h2 {text-transform: uppercase; color: #0063af; padding-top: 49px; width: 120px; background: #fff; margin: 0 auto;}
/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#logo {transition: all 0.7s ease-in-out; z-index: 9999 !important; float: left;}
#logoimg {display: block; width: 340px; margin: 0 auto; opacity: 1 !important; transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -webkit-transition: all .45s ease-in-out; margin-top: 42px;}
#navigation {position: relative;}
#navigation ul {margin-top: 60px; float: right; transition: all 0.7s ease-in-out; margin-bottom: 0;}
.nav1 {float: left; width: 395px; text-align: right;}
.nav1 li {float: right; margin-right: 48px;}
.nav2 {float: right; width: 395px;}
.nav2 li {float: left; margin-left: 48px;}
#navigation select { float:right; color: #a2a1a1; font-family: 'Open Sans', Helvetica, sans-serif; font-size: 18px;margin-top: 58px; border:2px solid #6ebec4}
#navigation li {list-style-type: none; display: inline-block; margin-left: 35px;}
#navigation li:first-child {margin-left: 0;}
#navigation a {text-decoration: none; color: #b2b2b5; font-family: 'Open Sans', Helvetica, sans-serif; font-size: 18px;transition: all .2s ease-in-out;}
#navigation a:hover {color: #0063af;}
#navigation #selected a, #navigation .current a {color: #0063af;}
.foot-links .current-foot a, .sb-menu .current-foot a {color: #da2b18;}
/* Header Shrink
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header {
width:100%;
background-color:#ffffff;
position:fixed;
top:0;
height: 141px;
border-bottom: #efefef 1px solid;
z-index: 98;
text-align: center;
-webkit-transition: height 0.7s;
-moz-transition: height 0.7s;
transition: height 0.7s;
-o-transition: height 0.7s;
}
.header.shrink {height: 75px;}
.shrink #logo {opacity: 1 !important;max-height: 108px;}
.shrink #logoimg {width: 200px; margin-top: 25px;}
.shrink #navigation ul {margin-top: 28px;}
.shrink #navigation li {margin-left: 35px;}
/* Burger Menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navbar { display:none; visibility:hidden}
.navbar .sb-toggle-left {float: right; padding: 6px 6px 4px 6px; background:rgba(243, 245, 247, 0.1);}
.navicon-line {width: 24px; height: 4px; border-radius: 1px; margin-bottom: 3px; background-color: #0063af;}
.sb-menu {padding: 0; margin: 0; list-style-type: none;}
.sb-menu li {width: 100%; padding: 0; margin: 0; border-top: 1px solid rgba(110, 190, 196, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-align: left;}
.sb-menu li a {font-family: 'Open Sans';}
.sb-menu li a.sub:hover {background-color: rgba(210, 35, 42, 0.05);}
.sb-menu > li:first-child {border-top: none;}
.sb-menu > li:last-child {border-bottom: none;}
.sb-menu li a {width: 100%; display: inline-block; padding: 1em; color: rgb(162, 161, 161); text-transform: uppercase;}
.sb-menu li a:hover {text-decoration: none; background-color: rgba(15, 50, 94, 0.05);}
.sb-left .sb-menu li a {border-left: 3px solid transparent;}
.sb-left .sb-menu li a:hover, .sb-left .sb-menu li.current a {border-left: 3px solid rgb(15, 50, 94); color:rgb(15, 50, 94);}
.sb-left .sb-menu li a.sub:hover, .sb-left .sb-menu li.current-foot a.sub {border-left: 3px solid rgba(210, 35, 42, 1); color:rgba(210, 35, 42, 1);}
/* Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#banner {background: url(../images/temperature-m-banner.png) no-repeat; background-size: cover; background-position: center; height: 700px; margin-top: 141px;}
#spacer {padding-top: 222px;}
.banner-text {margin: 0 auto; display: block; background: rgba(0,0,0,0.2); width: 50%; padding: 30px 20px 30px 20px;}
#banner h1 {font-size: 31px; color: #fff; margin-bottom: 25px; letter-spacing: 1px; text-transform: uppercase;}
#banner p {color: #fff; font-size: 18px; font-family: 'Open Sans', sans-serif;}
/* Home
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Our Services
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.our-services {margin: 0 auto; text-align: center;}
.our-services img {width: 60%; margin-bottom: 25px;}
.our-services .air-conditioning h3 {color: #0092d7;}
.our-services .refrigeration h3 {color: #0063af;}
.our-services .ventilation h3 {color: #9c5d7a;}
.our-services .heating h3 {color: #d2232a;}
.our-services .electrical h3 {color: #1bb81b;}
.our-services p {font-family: 'Open Sans', sans-serif;}
.our-services h3 {font-family: 'Open Sans';}
.row.our-services .two.columns {width: 19.8%}
.row.our-services {padding-bottom: 4%;}
.line {height: 4px; background: url(../images/title-line.png) repeat-x ;}
/* Our Clients
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.row.our-clients {margin-top: 7%;}
.row.our-clients .row {width: 100%;}
.row.our-clients .row.row2 {margin-left: 4%;}
.row.our-clients .four.columns {width: 16.8%}
.row.our-clients .large img {width: 90%;}
/* Quote Bar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.row.quote-bar {padding: 49px; background: #f4f4f4; padding-top: 0; margin-top: 4%; padding-bottom: 2%;}
.row.quote-bar p {text-transform: uppercase; font-family: Neuropol; color: #0063af; text-align: left; display: inline-block; float: left; font-size: 21px; margin-top: 60px;}
.row.quote-bar .quote {float: right;}
.row.quote-bar .quote p {background: #d2232a; padding: 10px 20px 10px 20px; margin-top: 50px; color: #fff; transition: all .2s ease-in-out; text-align: center}
.row.quote-bar .quote p:hover {background: #0063af;}
.row.quote-bar .quote a {color: #fff;}
.row.quote-bar span a {color: #d2232a !important;}
/* Services
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Services Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#services-banner {background: url(../images/services-banner.jpg) no-repeat; background-size: cover; background-position: center; margin-top: 141px; height: 222px;}
/* Services Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.service {text-align: left;}
.service img {width: 100%;}
.service h3, .service p {font-family: 'Open Sans'}
.service h3 {font-weight: 500; margin-bottom: 1rem;}
.service .line {padding: 3% 0; background-position-y: 50%; -moz-background-position-y: 50%; background-position: 50%;}
.service .ten.columns {margin-top: 1.5%;}
.ten.columns.air-conditioning h3 {color: #0092d7;}
.ten.columns.refrigeration h3 {color: #0063af;}
.ten.columns.ventilation h3 {color: #9c5d7a;}
.ten.columns.heating h3 {color: #d2232a;}
.ten.columns.electrical h3 {color: #1bb81b;}
.service .row.our-clients img {width: auto; text-align: center}
.service .row.our-clients { text-align: center; margin-top: 4%;}
/* Portfolio
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Portfolio Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#portfolio-banner {background: url(../images/portfolio-banner.jpg) no-repeat; background-size: cover; background-position: center; margin-top: 141px; height: 222px;}
/* Portfolio Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.portfolio img {width: 100%; height: inherit}
.portfolio .line {padding: 5% 0; background-position-y: 50%; background-position: 50%;}
.portfolio .row {margin-bottom: 2%;}
.portfolio .row.our-clients {margin-top: 0%; margin-bottom: 0;}
.portfolio .row.our-clients .row {margin-bottom: 0;}
.portfolio .row.our-clients img {width: auto}
.portfolio .row.our-clients.large img {width: 90%;}
.row.portfolio .three.columns {overflow: hidden; max-height: 190px;}
.portfolio .four.columns h2 {font-size: 22px !important; font-family: 'Open Sans'; letter-spacing: 0.5px;}
/* Testimonials
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Testimonials Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#testimonials-banner {background: url(../images/testimonials-banner.jpg) no-repeat; background-size: cover; background-position: center; margin-top: 141px; height: 222px;}
/* Testimonials Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.testimonials p, .testimonials strong {font-family: 'Open Sans'; color: #8d8d8d;}
.testimonials .line {padding: 4% 0; background-position-y: 50%;}
.testimonials .row {margin-bottom: 5%;}
.testimonials .row.our-clients {margin-top: 0%; margin-bottom: 0;}
.testimonials .row.our-clients .row {margin-bottom: 0;}
/* Contact
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Contact Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#contact-banner {background: url(../images/contact-banner.jpg) no-repeat; background-size: cover; background-position: center; margin-top: 141px; height: 222px;}
/* Contact Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact p, .contact a {font-family: 'Open Sans';}
.contact a, .contact span {color: #0063af; font-weight: 500; transition: all .2s ease-in-out;}
.contact_form input {width: 89.5%;}
.contact_form textarea, .contact_form .input-submit {width: 90%; height: 20%;}
.location p {background: url(../images/contact-location.png) no-repeat; padding-left: 150px; font-size: inherit; font-size: 16px !important; font-family: 'Open Sans' !important; color: #8d8d8d !important; text-transform: none !important;}
.contact-bar h2 {background: #f4f4f4 !important; width: 20% !important;}
.contact-bar-main p {margin-top: 0 !important;}
.map iframe {width: 90%; text-align: right; border: 4px solid #e9e9e9;}
.contact h2 {color: #0063af;}
/* Technical Literature
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Technical Literature Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#technical-literature-banner {background: url(../images/technical-literature-banner.jpg) no-repeat; background-size: cover; background-position: center; margin-top: 141px; height: 222px;}
/* Technical Literature Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.technical-literature .row {padding: 10% 0; font-family: 'Open Sans'; padding-bottom: 5%;}
.technical-literature-title h2 {width: 45% !important;}
.technical-literature .twelve.columns p {font-family: 'Open Sans'; color: #8d8d8d; line-height: 28px;}
.technical-literature .twelve.columns p span {text-transform: uppercase;}
.technical-literature-logos {padding: 0% !important;}
.technical-literature-logos img {width: 50%;}
.technical-literature-logos a:first-child img {float: right;}
.technical-literature-logos a:last-child img {float: left;}
.technical-literature .line {padding: 4% 0; background-position-y: 50%;}
/* Wholesalers
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Wholesalers Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#wholesalers-banner {background: url(../images/wholesalers-banner.jpg) no-repeat; background-size: cover; background-position: center; margin-top: 141px; height: 222px;}
/* Wholesalers Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wholesalers .row {font-family: 'Open Sans';}
.wholesalers .twelve.columns p {font-family: 'Open Sans'; color: #8d8d8d; line-height: 28px;}
.row.wholesalers {padding: 4% 0;}
.wholesalers-logos {padding: 0% !important;}
.wholesalers-logos img {width: 100%;}
/* Partners
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Partners Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#partners-banner {background: url(../images/partners-banner.jpg) no-repeat; background-size: cover; background-position: center; margin-top: 141px; height: 222px;}
/* Partners Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partners .row p {font-family: 'Open Sans'; padding-bottom: 20px;}
.parnters .twelve.columns p {font-family: 'Open Sans'; color: #8d8d8d; line-height: 28px;}
.partners-logos {padding-bottom: 20px;}
.partners-logos .our-services img {width: 100%;}
/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {background: #eaeaea; padding: 2% 0%; font-size: 12px; text-align: left;}
footer .columns {margin-top: 20px;}
footer a {transition: all .2s ease-in-out;}
footer a:hover {color: #da2b18;}
footer h4 {color: #0063af; font-size: 22px; font-weight: 400;}
footer p, footer a {color: #a5a5a5;}
.foot-links, .find-us, .git, .cwu, .find-us p, .git p, .git a, .cwu p, .cwu a {font-family: 'Open Sans';}
.foot-links ul li {margin-bottom: 0.6rem;}
.foot-links ul li a {font-family: 'Open Sans'; color: #a5a5a5; transition: all .2s ease-in-out;}
.foot-links ul li a:hover {color: #da2b18;}
.git h4 {margin-bottom: 1.3rem;}
.git span {font-size: 23px;}
.git .span {margin-bottom: 5px;}
.footer-social {padding-bottom: 15px;}
.footer-social img {width: 42px; margin-right: 5px; transition: all .2s ease-in-out;}
.footer-social img:hover {transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1);}
/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
font-family: 'Neuropol';
src: url('../fonts/NeuropolMedium.eot');
src: url('../fonts/NeuropolMedium.eot?#iefix') format('embedded-opentype'),
url('../fonts/NeuropolMedium.woff') format('woff'),
url('../fonts/NeuropolMedium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Neuropol-Bold';
src: url('../fonts/NeuropolBold.eot');
src: url('../fonts/NeuropolBold.eot?#iefix') format('embedded-opentype'),
url('../fonts/NeuropolBold.woff') format('woff'),
url('../fonts/NeuropolBold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}