/*HOME PAGE*/

@media (min-width: 1037px) {#toparea {background: #EDECEA url('back.jpg') repeat;} .owl-carousel .owl-item img {border-radius: 0 0 4px 4px;}}
@media (max-width: 570px) {#bodyhead span {display: block;}}
@media (max-width: 620px) and (min-width: 310px) {h2 {padding-top: 3px;} h2 span {display: block;}}

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

/*Top Slider - OWL CAROUSEL*/

/*Core*/

.no-js .owl-carousel {display: block;}
.owl-carousel {display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1;}
.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; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}
.owl-carousel .owl-item img {display: block; width: 100%;}
.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled {display: none;}
.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot {cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot {background: none; color: inherit; border: none; padding: 0 !important; font: inherit;}
.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.owl-rtl {direction: rtl;} .owl-carousel.owl-rtl .owl-item {float: right;}

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

.owl-height {transition: height 500ms ease-in-out;}


/*TBC Code*/

.carouselback {position: relative; overflow: hidden; z-index: 0} /*z-index: 0 allows bottom of mobile nav to cover carousel slightly*/
.carousel-wrap {position: relative; height: 100%; top: 0px; background-size: cover !important;}

.owl-carousel .owl-item img {position: relative; margin-top: 0;}
@media (min-width: 500px) {.carousel-wrap {max-height: 600px;}}
.owl-carousel .owl-item img {width: 100%;}
.owl-carousel .owl-prev, .owl-carousel .owl-next {display: block;} /*Removes blank space under carousel*/
.owl-carousel .nav-btn {height: 50px; position: absolute; width: 27px; cursor: pointer; top: 37%;}
.owl-carousel .prev-slide {background: url(images/toppics/nav.png) no-repeat scroll 1px 0; left: 7px;}
.owl-carousel .next-slide {background: url(images/toppics/nav.png) no-repeat scroll -24px 0px; right: 7px;}
.owl-carousel .prev-slide:hover, .owl-carousel .next-slide:hover {opacity: 0.83; -webkit-opacity: 0.83; filter: alpha(opacity=83); -webkit-filter: opacity(0.83);}

@media (min-width: 481px) {#toppic {display: none;}}
@media (max-width: 480px) {
.owl-carousel {display: none !important;} #toppic img {width: 500px; height: 300px; width: 100%; height: auto; display: block; margin: 0; padding: 0;} .carouselback {height: 100% !important;}
}

/*specific animation*/
@keyframes slideOutLeft {
0% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
100% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}
}
.slideOutLeft {-webkit-animation-name: slideOutLeft;animation-name: slideOutLeft; -webkit-animation-duration: 1.3s !important;
    animation-duration: 1.3s !important;}

@media (max-width: 650px) {
.owl-carousel .nav-btn {height: 41px; width: 22px; cursor: pointer; top: 35%;}
.owl-carousel .prev-slide {background: url(images/toppics/nav.png) no-repeat scroll 2px 0; left: 7px;}
.owl-carousel .next-slide {background: url(images/toppics/nav.png) no-repeat scroll -16px 0px; right: 7px;}
.owl-carousel .prev-slide, .owl-carousel .next-slide {background-size: 35px 40px;}
}

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

/*Service boxes*/

#blocks {display: table; table-layout: fixed; margin: 15px 10px; line-height: 0; text-align: center;}
.block {display: inline-block; margin: 0 7px} .block:first-child {margin-left: 0;} .block:last-child {margin-right: 0;}
/*#blocks .spacer {display: inline-block; width: 10px;}*/
.blockin {display: block; overflow: hidden; margin: auto;}

.imgtxt {display: block; text-align: center; margin: auto; font-size: 19px; line-height: 1.2; white-space: normal; padding: 8px 0 10px 0; background-color: #2444B9;}
.imgtxt, #blocks a {color: #FFF !important; text-decoration: none !important;}

#blocks img, .blockimg {display: block; width: 500px; height: 300px; width: 100%; height: auto;}
.block, #blocks img, .blockimg, .imgtxt {-webkit-transition: .4s;}

@media (max-width: 1037px) {#blocks {margin: 10px 0 0 0;} .block {margin: 0 3px;}}
@media (max-width: 950px) and (min-width: 701px) {.imgtxt {font-size: calc(1vw + 12px);}}
@media (min-width: 701px) {#blocks {white-space: nowrap;} .block {width: 24%;}} /*may be more like 24.5%*/
@media (max-width: 700px) {
#blocks {margin: 5px 0 0 0;} .block {width: 48%; display: inline-block; margin: 5px;}
#blocks .spacer {display: none;} .imgtxt {font-size: calc(5px + 2.5vw);}
}
@media (max-width: 580px) {
.imgtxt {font-size: 20px;} .block {margin: 0;} .block:nth-child(odd) {margin-right: 3px;} .block:nth-child(even) {margin-left: 3px;}
.block:nth-child(1), .block:nth-child(2) {margin-bottom: 6px;}
}
@media (min-width: 361px) {.blockin {border-radius: 6px 6px 0 0;} .imgtxt {border-radius: 0 0 6px 6px;}}
@media (max-width: 360px) {
#blocks {width: 100%; margin: 0;} .block {width: 100%; margin: 6px 0;}
.blockin img {max-height: 150px; object-fit: cover; object-position: center center;} .imgtxt {font-size: 22px;}
}

#blocks a:hover img {transform: scale(1.07); filter: brightness(115%) saturate(125%);}
.block:hover .imgtxt {background-color: #0066FF}

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

/*Quote*/

#quote {text-align: center; margin: 25px auto 15px auto; font-weight: 400; font-style: italic; font-size: 20px; line-height: 30px;}
@media (min-width: 625px) {#quote span {display: block;}} @media (max-width: 460px) {#quote {font-size: 19px; line-height: 25px;}}

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

/*Logo Gallery*/

#logogal {text-align: center; margin: 30px auto;}
#logogal div {vertical-align: top; margin: 8px 8px 8px 8px; display: inline-block;}
#logogal img {width: 200px; height: 100px; width: 100%; max-width: 200px; height: auto; text-align: center; margin: auto; display: block;}
@media (min-width: 805px) {#logogal {width: 730px;}} @media (max-width: 804px) {#logogal {width: 470px;}}
@media (max-width: 535px) {
#logogal {width: 100%;} #logogal div {width: 40%;} #logogal img {width: 200px; height: 100px; width: 100%; height: auto; max-width: 200px;}
#logogal span {width: 100%; font-size: 17px; line-height: 20px;}
}
@media (max-width: 350px) {
#logogal div {width: 100%; display: block; margin: 15px 0 !important;}
#logogal img {width: 160px; height: 100px; width: 100%; height: auto; max-width: 160px}}

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

/*Logos*/

#logos {margin: 0 auto; padding: 5px 20px; width: auto; text-align: center;} #logos table {text-align: center; margin: 0 auto;}
#logos img {width: 170px; height: 100px; width: 100%; max-width: 170px; height: auto; vertical-align: middle;} #logos th {padding: 10px;}

@media (max-width: 760px) {
#logos {margin: 0 auto; padding: 5px 10px;} #logos table {width: 510px; padding: 10px 0;}
#logos th {display: inline-block; padding: 5px;}
}
@media (max-width: 600px) {#logos table {width: 330px; padding: 5px 0;}}
@media (max-width: 400px) {#logos table {width: 230px;}}
@media (max-width: 300px) {#logos table {width: 210px;}}