@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root {
	--primary-font:"Montserrat", sans-serif;
	--secondary-font:"Anton", sans-serif;
	--font-size:14px;

	--white:#fff;
    --black:#000;
    --red:#ee2227;

    --radius:3px;
    --space:30px;

    --transition:all .3s ease-in-out;
}

* { margin:0; padding:0; }
body { font-family:var(--primary-font); font-size:var(--font-size); color:var(--black); line-height:28px; overflow-x:hidden; }

.clearfix:after { display:block; clear:both; content:""; }
*, :after, :before { box-sizing:border-box; }

.space { height:var(--space); }
.align-items-center { align-items:center; }
.product-box img { max-width:100%; height:auto; }

.bg-white { background:var(--white) !important; }
.bg-black { background:var(--black) !important; }
.bg-red { background:var(--red) !important; }
.bg-light { background:#fff6f6; }

.text-white { color:var(--white) !important; }
.text-black { color:var(--black) !important; }
.text-red { color:var(--red) !important; }
.text-large { font-size:1rem; }
.text-center { text-align:center; }
.text-uppercase { text-transform:uppercase; }

.mb-0 { margin-bottom:0 !important; }
.mb-3 { margin-bottom:1rem; }

p { margin-bottom:1rem; }
.p-0 { padding:0 !important; }
.pb-0 { padding-bottom:0 !important; }

.text-left-border { position:relative; padding-left:1rem; color:var(--black); }
.text-left-border:before { content:""; width:6px; height:100%; background:var(--red); position:absolute; left:0; }

.btn-link { color:var(--white); text-decoration:none; text-align:
	center; line-height:30px; font-weight:500; font-size:14px; padding:5px 15px; display:inline-block; border:1px solid var(--red); border-radius:var(--radius); transform-origin:50% 50% 0px; transform:translate(0px); transition:var(--transition); position:relative; }
.btn-link:before { content:""; display:block; position:absolute; top:0; left:0; height:100%; width:100%; z-index:-1; background:var(--red); transition:all .4s cubic-bezier(.42,0,.58,1); }
.btn-link:after { content:""; display:block; position:absolute; height:0; right:50%; top:50%; width:100%; z-index:-1; transition:all .75s ease 0s; }
.btn-link:hover { color:var(--red); }
.btn-link:hover:before { right:0; left:auto; width:0; }

.container { max-width:1140px; padding:0 15px; margin:0 auto; }
.row { display:flex; flex-wrap:wrap; margin-left:-1rem; margin-right:-1rem; }
.col-3 { flex:0 0 auto; width:25%; padding:0 1rem; box-sizing:border-box; }
.col-5 { flex:0 0 auto; width:41.66666667%; padding:0 1rem; box-sizing:border-box; }
.col-half { flex:0 0 auto; width:50%; padding:0 1rem; box-sizing:border-box; }
.col-7 { flex:0 0 auto; width:58.33333333%; padding:0 1rem; box-sizing:border-box; }
.row.g-0 .col-half { padding:0; }

h1 { font-size:2.25rem; font-weight:700; line-height:1.2; margin:0 0 1.5rem; }
h2 { font-size:1.65rem; font-weight:700; line-height:1.2; }
h4 { font-size:1.35rem; font-weight:500; line-height:1.2; margin-bottom:.75rem; }

table thead th { text-align:left; text-transform:uppercase; font-size:16px; padding:0.5rem; }
table tr td { padding:0.5rem; vertical-align:top; border-top:1px solid #ddd; }
table tr td strong { text-transform:uppercase; color:var(--red); }
table.product-spec-table tr td strong { text-transform:uppercase; color:var(--black); }

.header { padding:1.25rem 0 0.5rem; background:var(--white); }
.header .logo { float:left; }
.header .logo img { width:auto; height:25px; }

.main-banner { padding:0 15px; position:relative; }
.main-banner .main-banner-img img { width:100%; max-width:100%; height:500px; border-radius:6px; object-fit:cover; }
.main-banner .container { position:absolute; top:0; left:0; right:0; margin:0 auto; height:100%; z-index:1; }
.main-banner .banner-cont { width:auto; padding:0; position:relative; top:50%; transform:translateY(-50%); border-radius:6px; }
.main-banner h1 { font-size:4.25rem; color:var(--white); line-height:1.1; padding-bottom:1.5rem; margin:0 0 1.5rem; text-transform:uppercase; }
.main-banner h1 span { color:var(--red); }
.main-banner h3 { font-size:2rem; font-weight:400; line-height:1.2; color:var(--white); margin:0; }
.main-banner h3 strong { font-size:1.7rem; padding:0; margin:0.75rem 0 0; text-transform:uppercase; font-weight:600; display:inline-block; }
.main-banner h3 span { color:var(--red); font-weight:700; padding:0 0.5rem; }

.hero { padding:6rem 0; position:relative; }
.hero .hero-right { width:50%; height:100%; position:absolute; right:0; top:0; }
.hero-right .hero-bkg-inr { background-position:center center; background-repeat:no-repeat; background-size:cover; height:100%; }
.hero p { font-size:1rem; }

.section { padding:4rem 0; }

.product-grid { display:flex; flex-wrap:wrap; justify-content:center; }
.product-grid .sensor-product-holder { flex:0 0 calc(25%); padding:20px; }
.sensor-product-holder .sensor-image-holder { text-align:center; }
.sensor-product-holder .sensor-image-holder img { max-width:100%; width:175px; height:auto; margin:0 auto; }
.sensor-product-holder .sensor-name { font-size:15px; font-weight:500; line-height:21px; margin:0.5rem 0; min-height:42px; }
.sensor-product-holder .sensor-name a { text-decoration:none; color:var(--black); }
.sensor-product-holder .sensor-name a:hover { color:var(--red); }
.sensor-product-holder .sensor-sku { line-height:normal; }

.features-box-wrapper { display:grid; grid-template-columns:repeat(2, 1fr); align-items:center; justify-content:center; gap:20px; }
.features-box { padding:1.25rem; border:1px solid #ddd; border-radius:var(--radius); }
.features-box h5 { font-size:1.1rem; font-weight:700; margin-bottom:0.5rem; }
.features-box p { line-height:1.5; }
.features-box-wrapper .features-box:nth-child(-n + 2) p { min-height:84px; }

.section-cta .col-text { padding:5rem 8rem; background:var(--black); }
.section-cta h2 { font-size:2rem; margin-bottom:1.5rem; }
.section-cta .iot-alert-dashboard { background-repeat:no-repeat; background-position:left center; position:relative; height:100%; }
.section-cta p { font-size:1.05rem; font-weight:300; }
.section-cta h2 + p + p { margin-bottom:2rem; }

.spec-wrapper-collapse { float:right; position:relative; top:3px; cursor:pointer; }
.device-setup-step img { width:150px; height:150px; }
.product-main-img img { width:400px; height:auto; }
.bullet-list li { list-style:none; padding:0.45rem 0 0.45rem 2.25rem; background:url(../images/checked.svg) left 8px no-repeat; background-size:25px; font-size:15px; }

.footer { padding:1rem 0; background:#f0f0f0; }

@media (max-width:767px) {
	body { overflow-x:hidden; }
	.col-half { width:100%; }
	.main-banner .banner-cont { padding:0 2rem; }
	.main-banner .main-banner-img img { height:400px; }
	.main-banner h1 { font-size:1.75rem; padding-bottom:0; }
	.main-banner h3 { font-size:1.25rem; }
	.main-banner h3 strong { font-size:1rem; }
	.main-banner h3 span { padding:0; font-size:1rem; }
	.product-grid .sensor-product-holder { flex:0 0 calc(100%); }
	.sensor-product-holder .sensor-name { min-height:0; }
	.section-cta .row .col-half:last-child { order:1; }
	.section-cta .row .col-half:first-child { order:2; }
	.section-cta .col-text { padding:2rem 3rem; }
	.section-cta p { font-size:100%; line-height:22px; }
	.section-cta .iot-alert-dashboard { height:550px; }
}