/*HOME PAGE*/

/*----------------------------------------------*/

/*Top Slider*/

/*Core*/

.owl-carousel {background-color: #333;}
.no-js .owl-carousel {display: block;}
.owl-carousel.owl-loaded {display: block;}
.owl-carousel.owl-loading {opacity: 0; display: block;}
.owl-carousel.owl-hidden {opacity: 0;}
.owl-carousel.owl-refresh .owl-item {visibility: hidden;}
.owl-carousel.owl-drag .owl-item {-ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.owl-carousel.owl-grab {cursor: move; cursor: grab;}
.owl-carousel {display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative;}
.owl-carousel .owl-stage {position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden;}
.owl-carousel .owl-stage:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.owl-carousel .owl-stage-outer {position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper, .owl-carousel .owl-item {-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);}
.owl-carousel .owl-item {position: relative; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}
.owl-carousel .owl-item img {display: block; width: 100%;}

/*animation*/
.owl-carousel .animated {animation-duration: 800ms; animation-fill-mode: both; }
.owl-carousel .owl-animated-in {z-index: 0;}
.owl-carousel .owl-animated-out {z-index: 1;}

@keyframes lightSpeedOut {from {opacity: 1;} to {transform: translate3d(100%, 0, 0); opacity: 0;}}
.owl-carousel .lightSpeedOut {animation-name: lightSpeedOut;}


/*dots*/
.owl-nav {display: none;}
.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot {cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.owl-dots {position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); bottom: 8px;}
.owl-dot {-webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); height: 13px; width: 20px; padding: 0; margin: 0 3px; background-color: #FFF; outline: none; border: 1px solid #FFF; -webkit-transition: 0.4s; transition: 0.4s; vertical-align: middle;} /*skew makes parallelogram*/
.owl-dot:hover {background-color: #219CDE; border: 1px solid #FFF;}
.owl-dot.active, .owl-dot.active:hover {background-color: #0776B1; border: 1px solid #FFF;}


.bgcaption {font-family: 'Oswald', Impact, Calibri, Arial, Franklin Gothic; font-weight: 500 !important; position: absolute; left: 5%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); color: #FFF;}
.cap1 {font-size: 75px; text-shadow: 1px 1px 2px #000; line-height: 1.25; text-transform: uppercase; /*font-style: italic;*/ -webkit-transform: skew(-11deg); -ms-transform: skew(-11deg); transform: skew(-11deg); padding-left: 7px;}
.cap2 {font-size: 35px; text-shadow: none; padding: 7px 0 0 8px; text-transform: uppercase;}

.capbtn {transform: skew(-8deg); -webkit-transform: skew(-8deg); -ms-transform: skew(-8deg);}
.capbtn a {display: inline-block; margin: 12px 0 0 15px; padding: 5px 18px 6px 18px; font-size: 22px; text-decoration: none !important; transition: 0.3s; text-transform: uppercase; color: #FFF !important; background-color: #0776B1; border: 2px solid #FFF;}
.capbtn a:hover {background-color: #219CDE;}

@media (max-width: 830px) {.bgcaption {top: 35%; transform: translateY(-35%); -webkit-transform: translateY(-35%); -ms-transform: translateY(-35%);}}
@media (max-width: 740px) {
.bgcaption {left: 3%;} .cap1 {font-size: 9vw;} .cap2 {font-size: 4.3vw;}
.capbtn a {padding: 3px 13px 4px 13px; font-size: 20px;}
}

.owl-carousel .panel {height: 40vw; max-height: 450px; background-size: cover;}
.owl-carousel .panel1, .owl-carousel .panel2, .owl-carousel .panel3 {background-position: 0 50%;}

@media (min-width: 521px) {
.owl-carousel .panel1 {background-image: url("../images/toppics/airhandlers-mechanical-1a.jpg");}
.owl-carousel .panel2 {background-image: url("../images/toppics/airhandlers-mechanical-2a.jpg");}
.owl-carousel .panel3 {background-image: url("../images/toppics/airhandlers-mechanical-3a.jpg"); background-position: 0 20%;}
}
@media (min-width: 521px) {.bgimgback {display: none !important;}}
@media (max-width: 520px) {
.bgimgback {height: 40vw; max-height: 450px;}
.bgimg {position: relative; background-repeat: no-repeat; background-size: cover; background-image: url("../images/toppics/airhandlers-mechanical-1b.jpg"); background-position: 50% 50%; height: 100%;}
.carouselback, .owl-carousel, .owl-dots, .owl-dot {display: none !important;}
.bgcaption {top: 48%; -webkit-transform: translateY(-48%); transform: translateY(-48%); right: 5%; margin: auto; text-align: center;}
.cap1 {font-size: 11vw;} .cap2 {font-size: 5.5vw;}
}

/*-----------------*/

/*Service Blocks*/

#blocks {display: table; table-layout: fixed; padding: 9px 0 0 0; line-height: 0; width: 100%; text-align: center; background-color: #FFF;}
#blocks a {display: table-cell; /*width: 16.67%;*/ text-decoration: none !important; color: #FFF !important;}
#blocks div {margin: 0 5px; padding: 12px 0; text-align: center; background-color: #0776B1; transition: .4s;}
#blocks img {width: 90px; height: 90px; margin-bottom: 8px; transition: .4s; transform: translateZ(0); transform: translate3d(0,0,0); filter: blur(0); backface-visibility: hidden}
#blocks h1 {font-size: 20px; line-height: 1.3; font-weight: 400 !important; color: #FFF !important; text-transform: uppercase;}

#blocks div:hover {background-color: #219CDE;}
#blocks div:hover img {-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}

@media (max-width: 1200px) and (min-width: 686px) {#blocks span {display: block;} #blocks div {height: 150px;}}
@media (max-width: 895px) and (min-width: 686px) {
#blocks {padding: 4px 0 0 0;} #blocks div {margin: 0 2px; height: 124px; padding: 8px 0;}
#blocks h1 {font-size: 17px;} #blocks img {width: 70px; height: 70px;}
}
@media (max-width: 755px) and (min-width: 686px) {#blocks h1 {font-size: 16px; padding-top: 5px;}}
@media (min-width: 686px) {#blocks {white-space: nowrap;}} /*otherwise last image may wrap to next line on some devices*/
@media (max-width: 685px) {
#blocks {padding: 2px 0 0 0;} #blocks a {display: inline-block; width: 50%;}
#blocks div {margin: 2px;} #blocks a:last-child {display: none;}
}
@media (max-width: 510px) {#blocks img {width: 80px; height: 80px;} #blocks h1 {font-size: 18px;}}
@media (max-width: 430px) {
#blocks {padding: 1px 0 0 0;} #blocks div {height: 115px; margin: 1px;} #blocks img {width: 65px; height: 65px;}
#blocks h1 {font-size: 17px; display: table-cell; width: 300px; overflow: hidden; height: 40px;} #blocks span {display: block;}
}

/*-----------------*/

#rightbox {margin-top: 10px; padding: 18px 15px 20px 15px; background-color: #F2F2F2; border-radius: 4px; border: 6px solid #0776B1;}
.rbhead {text-align: center; font-weight: 500;}
#rightbox ul {margin: 20px 0 0 0; text-align: left;}
#rightbox li {padding-bottom: 16px; font-size: .9em; line-height: 1.4; margin-left: -20px;}
#rightbox li:last-child {padding-bottom: 0;}
#rightbox a:hover {text-decoration: underline;}

@media (min-width: 901px) {
#floatback:before {width: 320px; height: 570px;}
#rightbox {width: 260px; height: 500px;}
}
@media (min-width: 700px) and (max-width: 900px) {
#floatback:before {width: 270px; height: 615px;}
#rightbox {width: 220px; height: 555px;}
}
@media (min-width: 700px) {
#floatback {position: relative;}
#floatback:before {content: ''; float: right; display: block; margin: 0 0 15px 15px;}
#rightbox {position: absolute; top: 0; right: 0;}
}
@media (max-width: 700px) {#rightbox {float: none; width: auto; max-width: 290px; margin: 30px auto 25px auto !important; text-align: center; margin: auto;}}