@import url("reset.css");

/* 
font color:#5a5a5a
light font color:#f6f6f6

BLUE 
blue : 1a92d0
dark: 006aa8
darker: 004066

green: 62ae3c
dark green: 539c2d

orange: ff9500


*/

.clr {clear:both;}
body {color:#5a5a5a; font-family:"open sans",Helvetica,Arial,sans-serif; font-size:14px;}
strong {font-weight:bold;}
.margin {margin:0 auto; width:1000px;}
.hide {display:none;}
.show {display:block;}
#pos {position:fixed; background:#fff; color:#000;}
.fixed {position:fixed; top:0;}
.green {color:green;}
.red {color:red;}
#fade_dark {background:#000; display:none; height:100%; left:0; opacity:0.6; position:fixed; top:0; width:100%; z-index:20;}


/*************
	HEADER
*************/

#header_cont {background:#fff;}
#header {left:50%; transform:translateX(-50%); position:absolute; width:1000px;}

#header_logo {float:left; padding:20px 10px 10px 10px;}
#header_sensors {color:#00abf5; float:left; font-weight:bold; padding:25px 0px 0px 100px; text-decoration:underline;}

#header_contact {float:right; padding-right:10px;}
#header_phone {background:url(../images/phone-header.svg) no-repeat 0px 18px; background-size:18px 18px; float:left; padding:17px 20px 10px 24px;}
#header_phone a {color:#000; display:block; font-size:18px; font-weight:bold;}

#header_livechat {float:left; padding:10px;}
#header_livechat a {background:url(../images/chat-header.svg) no-repeat #D559FF 15px 5px; background-size:18px 18px; border-radius:15px; color:#fff; display:block; font-size:18px; font-weight:bold; padding:5px 15px 5px 40px;}

/*************
	INTRO
*************/

#intro_cont {background:url(../images/hero-bg.jpg) no-repeat top center; background-size:2000px 800px; padding:80px 0 40px 0;}
#intro {margin:0 auto; width:1000px;}

/* text */
#intro_text {box-sizing:border-box; color:#fff; float:left; padding-right:20px; width:50%;}
#intro_text h1 {font-size:28px; font-weight:bold; line-height:40px; padding-bottom:40px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);}

#intro_list li {background-repeat:no-repeat; background-position:5px 5px; background-size:18px 18px; font-size:16px; padding:4px 0 16px 30px;}

#intro_list_remote {background-image:url(../images/remote-monitoring.svg);}
#intro_list_cloud {background-image:url(../images/cloud.svg);}
#intro_list_alerts {background-image:url(../images/alerts.svg);}
#intro_list_quick {background-image:url(../images/quick.svg);}
#intro_list_accuracy {background-image:url(../images/accuracy.svg);}
#intro_list_cost {background-image:url(../images/low-cost.svg);}

#intro_video {padding:20px 0;}
#intro_video a {background:url(../images/play.svg) no-repeat 10px center #000; background-size:18px 18px; border:none; border-radius:15px; box-sizing:border-box; color:#fff; cursor:pointer; display:block; font-size:18px; padding:10px 20px 10px 40px; width:250px;}

#intro_action h3 {font-size:18px; font-weight:bold; padding-bottom:20px;}
#intro_action_phone {background:url(../images/intro-phone.svg) no-repeat 10px center #D559FF; background-size:20px 20px; border-radius:15px; color:#fff; float:left; font-size:16px; margin-right:40px; padding:10px 20px 10px 35px;}
#intro_action_chat {background:url(../images/intro-chat.svg) no-repeat 10px center #fff; background-size:20px 20px; border-radius:15px; color:#000; font-size:16px;  float:left; padding:10px 20px 10px 35px;}

/* form */
#intro_form_cont {background:#fff; box-shadow:0px 0px 5px #afafaf; box-sizing:border-box; border-radius:10px; box-sizing:border-box; float:right; padding:20px; width:50%;}
#intro_form_cont h2 {border-bottom:3px solid #004a6c; color:#004a6c; font-size:20px; font-weight:bold; padding:20px; text-align:center;}

#intro_form {padding-top:20px;}
.intro_form_cont {box-sizing:border-box; float:left; padding:10px; width:50%;}
.intro_form_cont label {color:#000; display:block; font-weight:bold; padding-bottom:10px;}
.intro_form_cont input {border:1px solid #c7c7c7; border-radius:5px; box-sizing:border-box; display:block; font-size:16px; padding:10px; width:100%;}

.intro_comment_cont {box-sizing:border-box; padding:15px; width:100%;}
.intro_comment_cont label {color:#000; display:block; font-weight:bold; padding-bottom:10px;}
.intro_comment_cont textarea {border:1px solid #c7c7c7; border-radius:5px; box-sizing:border-box; display:block; font-family:"open sans",Helvetica,Arial,sans-serif; font-size:16px; height:70px; padding:10px; resize:none; width:100%;}
.intro_comment_cont textarea::placeholder {font-family:"open sans",Helvetica,Arial,sans-serif;}

.intro_submit_cont {box-sizing:border-box; padding:15px; width:100%;}
.intro_submit_cont input {background:#D559FF; border:none; border-radius:15px; box-sizing:border-box; color:#fff; cursor:pointer; font-size:18px; padding:10px 20px;}

.form_error {color:#d30005; font-size:12px; padding-top:3px;}

/*************
	SPECS
*************/

#specs {margin:0 auto; padding:100px 0 0 0; text-align:center; width:1000px;}
.specs_box {background-repeat:no-repeat; background-position:center top; background-size:60px 60px; display:inline-block; height:100px; margin:10px; padding:70px 10px 10px 10px; width:140px;}
.specs_box h3 {color:#000; font-size:16px; font-weight:bold; padding-bottom:10px; line-height:20px; text-align:center;}
.specs_box p {font-size:14px; line-height:20px; text-align:center;}

#specs_box_alerts {background-image:url(../images/specs-alerts.svg);}
#specs_box_connections {background-image:url(../images/specs-wireless.svg);}
#specs_box_range {background-image:url(../images/specs-long.svg);}
#specs_box_battery {background-image:url(../images/specs-battery.svg);}
#specs_box_temperature {background-image:url(../images/specs-temperature.svg);}

/*************
	WORKS
*************/

#works {margin:0 auto; padding-top:30px; text-align:center; width:1000px;}
#works h2 {font-size:30px;}


/*************
	APPS
*************/

#apps_cont {background:url(../images/apps-bg.jpg) no-repeat top center; background-size:2000px 700px; height:700px;}
#apps {margin:0 auto; width:1000px;}
#apps_cont h2 {font-size:30px; padding-bottom:30px; text-align:center;}
#apps_cont_text {font-size:18px; padding:0 0 30px; text-align:center;}

.apps_box {background:no-repeat center top #fff; background-size:270px 108px; border-radius:10px; box-shadow:0px 0px 5px #afafaf; float:left; height:110px; margin:30px; overflow:hidden; padding:120px 25px 20px 25px; width:220px;}
.apps_box h3 {color:#000; font-size:18px; font-weight:bold; padding-bottom:10px;}
.apps_box p {font-size:12px; line-height:18px}

#apps_box_food {background-image:url(../images/app-food.jpg);}
#apps_box_facility {background-image:url(../images/app-facility.jpg);}
#apps_box_hvac {background-image:url(../images/app-hvac.jpg);}
#apps_box_greenhouses {background-image:url(../images/app-green.jpg);}
#apps_box_data {background-image:url(../images/app-data.jpg);}
#apps_box_office {background-image:url(../images/app-office.jpg);}

/*************
	PRODUCTS
*************/

#products_cont {margin:0 auto; width:1000px;}
#products_cont h2 {font-size:30px; padding:50px 0 30px; text-align:center;}

.products_box {background:#CEE6FB; border-radius:10px; float:left; height:170px; margin:25px; padding:20px; width:160px;}
.products_box_image {background:no-repeat top center; background-size:160px 97px; border-radius:10px; height:100px; width:160px;}
.products_box h3 {color:#004a6c; font-size:18px; font-weight:bold; line-height:24px; padding:20px 0;}
#products_cost .products_box_image {background-image: url(../images/product-cost.jpg);}
#products_battery .products_box_image {background-image: url(../images/product-range.jpg);}
#products_industrial .products_box_image {background-image: url(../images/product-industrial.jpg);}
#products_wifi .products_box_image {background-image: url(../images/product-wifi.jpg);}


/*************
	WHY
*************/

#why {margin:0 auto; padding:20px 0; width:1000px;}
#why h2 {font-size:30px; padding:50px 0 50px 0; text-align:center;}

#why_left {float:left; width:280px;}
#choose_years {background:url(../images/choose-years.jpg) no-repeat top center #002c45; background-size:100%; border-radius:20px; color:#fff; height:440px; text-align:center; width:280px}
#choose_years h3 {font-size:36px; font-weight:bold; padding-top:300px;}
#choose_years p {font-size:20px; padding-top:15px;}

#why_right {float:right; width:720px;}
#choose_engineers {margin:0 0 40px 40px; width:720px;}
#choose_engineers_text {background:url(../images/choose-expert.png) no-repeat 150px 40px #F6FAFD; background-size:40px 40px; border-radius:20px 0px 0px 20px; float:left; height:200px; width:280px;}
#choose_engineers_text h3 {color:#000; font-size:30px; font-weight:bold; line-height:40px; padding:40px;}
#choose_engineers_image_cont {background:#CEE6FB; border-radius:0px 20px 20px 0px; float:left; height:200px; width:380px;}
#choose_engineers_image {background:url(../images/choose-engineer.jpg) no-repeat center center; background-size:cover; border-radius:40px; box-shadow:0px 0px 20px #fff; height:160px; overflow:none; margin:20px 0 0 70px; width:240px;}

#choose_guarantee {background:url(../images/choose-guarantee.png) no-repeat center center; background-size:cover; border-radius:20px; color:#000; float:left; height:200px; margin-left:40px; text-align:center; width:310px;}
#choose_guarantee h3 {font-size:30px; font-weight:bold; padding-top:20px;}
#choose_guarantee_money {background:url(../images/choose-money.png) no-repeat center center; background-size:50px 50px; height:100px;}
#choose_guarantee p {font-size:20px;}

#choose_uk {background:url(../images/choose-uk.jpg) no-repeat center center; background-size:cover; border-radius:20px; float:left; height:200px; margin-left:40px; width:310px;}
#choose_uk h3 {background:#fff; border-radius:15px; color:#000; margin:140px auto 0 auto; padding:10px; text-align:center; width:200px;}

.why_boxs {border-radius:15px; height:100px; margin:10px; padding:10px;}
.why_boxs h3 {font-size:16px; font-weight:bold; padding-bottom:10px;}
.why_boxs p {font-size:14px; line-height:20px;}

/*************
	COMPANIES
*************/

#companies {margin:0 auto; padding:40px 0; width:1000px;}
#companies h2 {font-size:30px; padding:30px 0 50px; text-align:center;}
#companies img {margin:0 4%;}

/*************
	FAQS
*************/

#faqs_cont {background:#E3F0FB; padding:40px 0;}
#faqs {margin:0 auto; width:1000px;}
#faqs h2 {font-size:30px; padding:30px 0 50px; text-align:center;}

.faqs {background:#fff; border-radius:10px; margin-bottom:30px; padding:20px;}
.faqs h3 {color:#004a6c; cursor:pointer; font-size:22px; font-weight:bold;}
.faqs p {display:none; font-size:16px; line-height:20px; padding-top:20px;}

/*************
	VIDEO
*************/

#enquiry_video_setup_popup {display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); z-index:60;}



/*************
	THANK YOU
*************/

#thankyou_cont {padding:200px;}
#thankyou_cont h1 {font-size:26px; text-align:center;}


/*************
	FOOTER
*************/

#footer_cont {background:#0f1c35;}
#footer {margin:0 auto; width:1000px;}
#footer_logo {float:left; padding:50px;}
#footer_copy {color:#fff; float:left; font-size:12px; padding:60px 50px 50px 50px;}

/*************
	MOBILE
*************/



@media (max-width: 999px) {

#header {box-sizing:border-box; padding:0 30px; width:100%;}
#header_logo {float:none; text-align:center;}
#header_sensors {display:none;}
#header_phone {background-size:16px 16px;}
#header_phone a {color:#000; display:block; font-size:16px; font-weight:bold;}
#header_livechat a {background-size:16px 16px; font-size:16px; font-weight:bold; padding:5px 15px 5px 40px;}

#intro {width:auto;}
#intro_text {float:none; padding:50px; width:auto;}
#intro_form_cont {float:none; padding:50px; width:auto;}

#specs {width:auto;}

#works {width:auto;}

#apps_cont {height:auto;}
#apps {width:auto;}
#apps {text-align:center;}
.apps_box {display:inline-block; float:none;}

#products_cont {text-align:center; width:auto;}
.products_box {float:none; display:inline-block;}

#why {text-align:center; width:auto;}
#why_left {display:inline-block; float:none; margin-bottom:50px;}
#why_right {float:none; text-align:center; width:auto;}
#choose_engineers {margin:0; width:auto;}
#choose_engineers_text {background:url(../images/choose-expert.png) no-repeat 200px 40px #F6FAFD; border-radius:20px; display:inline-block; float:none; margin-bottom:50px;}
#choose_engineers_image_cont {display:none;}
#choose_guarantee {border-radius:20px; display:inline-block; float:none; margin:0 0 50px 0; width:280px;}
#choose_uk {display:inline-block; float:none; margin:0 0 50px 0; width:280px;}


#companies {text-align:center; width:auto;}
#companies img {margin:4%;}

#faqs {width:auto;}
.faqs {margin:0 10px 30px 10px;}

#footer {width:100%;}

}