/*
Theme Name: www.telematics.plus Template
Theme URI: https://sandhills.com
Author: Sandhills
Author URI: https://sandhills.com
Description: Sandhills default template.
Version: 1.0
Text Domain: sandhills
Tags: Sandhills default
*/


/* RESET */
.row > * {
    padding-left: calc(var(--bs-gutter-x) * 0.0);
    padding-right: calc(var(--bs-gutter-x) * 0.0);
}
a {
    text-decoration: none;
    color: #7a878e;
    outline: 0;
}
html, body{height: 100%; width: 100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent; border: 0; margin: 0; padding: 0;} img{max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;} .cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *{box-sizing: border-box;}
.sidebarColumn{min-height: 10px !important;}

html, body{font-family: urw-din, sans-serif; height: 100%; width: 100%;}
h1, h2, h3, h4, h5, h6{font-weight: 700; margin: 0; padding: 0;}
h1{text-transform: uppercase;}
p{line-height: 26px;}

.col-lg-1, .col-lg-10, .col-lg-11 .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{padding-right: 20px !important;}

/* HEADER */

.header{display: flex; flex-wrap: wrap; align-items: center; background: #fff; position: relative; padding: 15px 25px; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25); z-index: 9;}
.header .logo{width: 250px;}
.header .logo .home-logo{display: none;}
.header .navigation{width: 500px; padding-left: 20px; font-family: urw-din, sans-serif;}
.header .navigation .show-mobile{display: none;}
.header .contact{display: flex; width: calc(100% - 750px); text-align: right; order: 3;}
.header .contact span{padding: 0 10px;}
.header .contact .fa{margin-right: 5px;}
.header .contact a{font-size: 16px; font-weight: 700; color: #18355D;}
.header .contact a:hover{color: #EF8901;}
.header .contact .cta-btn{display: inline-block; background: #EF8901; padding: 12px 35px; font-size: 16px; font-weight: 700; text-transform: uppercase; border-radius: 5px; border: none; color: #fff !important; transition: all .2s ease-in-out;}
.header .contact .cta-btn:hover{background: #D47900; color: #fff !important;}

#menu-button{padding-top: 0;}
#menu-button a{color: #18355D;}

/* HOME PAGE */

.home-container{max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.hero{background: url("images/map-bg.jpg") fixed center center; background-size: cover; margin-top: -100px; padding: 150px 0 50px;}
.hero video{border-radius: 10px; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);}

.grey-bar, .orange-bar{display: inline-block; height: 5px; min-height: 5px !important; width: 100px; background: #ccc; margin: 15px 2px 0;}
.orange-bar{background: #EF8901;}

.portal{background: #fff; padding: 50px 0 20px; text-align: center; color: #555;}
.portal h1{font-weight: 400; text-transform: uppercase; color: #333;}
.portal .portal-box{margin: 25px;}
.portal .portal-box p{font-size: 16px; line-height: 125%; font-weight: 700; color: #333;}
.portal .portal-box img{margin-bottom: 10px;}

.benefits{background: #18355D url("images/blug-bg.png") right 25px center no-repeat; background-size: contain; padding: 50px 0; color: #fff; border-bottom: 1px #fff solid;}
.benefits h2{font-weight: 400; text-transform: uppercase; color: #fff;}
.benefits h2 strong{font-weight: 700; color: #EF8901;}
.benefits ul{padding: 0;}
.benefits ul li{font-size: 16px; list-style: none; margin-left: 0; padding: 8px 15px; padding-left: 25px; text-indent: -29px; font-weight: 700;}
.benefits ul li:before{font-family: FontAwesome; content: '\f058'; margin-right: 10px; color: #EF8901;}

.demo{background: #18355D url("images/demo-bg.jpg") center center no-repeat; background-size: cover; padding: 50px 0; text-align: center; color: #fff;}
.demo p{font-size: 20px; margin: 5px 0;}
.demo .btn{display: inline-block; background: #18355D; margin: 15px 5px; padding: 12px 35px; font-size: 20px; font-weight: 700; text-transform: uppercase; border-radius: 5px; border: none; color: #fff;}
.demo .btn:hover{background: #EF8901 !important; color: #fff;}

/* SUB PAGES */

.page-container{background: url("images/page-bg.jpg") fixed center center no-repeat; background-size: cover; padding-bottom: 35px;}
.page-container .heading{padding: 35px 0; text-align: center; color: #fff;}
.main-container{background: #fff; min-height: 75vh; max-width: 1200px; margin: 0 auto; padding: 35px; border-radius: 5px; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);}
.main-container ul li{list-style: disc; font-size: 15px; margin-left: 15px; padding: 3px 0;}

.banner-content{display: flex; flex-wrap: wrap; background: #fff; margin-bottom: 20px; padding: 15px; border: 1px #ddd solid; border-radius: 5px;}
.banner-content div{display: flex; flex: 1; align-items: center; font-size: 16px; font-weight: 700; color: #555;}
.banner-content div img{max-width: 60px; width: auto; margin-right: 10px;}

.contactForm{background: #f5f5f5; margin: 10px 0; padding: 20px; padding-left: 20px !important; padding-right: 20px !important; border: 1px #ddd solid;}
.contactForm h1{margin-bottom: 20px; font-size: 24px; color: #EF8901;}
.contactForm .btn, .contactForm .btn:focus{display: inline-block; background: #18355D; margin: 5px 0; padding: 12px 35px; font-size: 16px; font-weight: 700; text-transform: uppercase; border-radius: 5px; border: none; color: #fff;}
.contactForm .btn:hover{background: #EF8901 !important; color: #fff;}
.alert-success{background-color: #EF8901 !important; border-left: 3px solid #BB6B00 !important;}

.market-reports{float: left; width: calc(100% - 325px); padding-right: 25px;}
.market-reports .market-report{padding: 25px 0; border-bottom: 1px #ddd solid;}
.market-reports .market-report h3{font-size: 20px; line-height: 22px; margin-bottom: 5px;}
.market-reports .market-report h3 a{transition: all .2s ease-in-out; color: #333;}
.market-reports .market-report h3 a:hover{color: #EF8901;}
.market-reports .market-report .date{margin-bottom: 10px; font-weight: 700; color: #555;}
.market-reports .market-report .report-image{float: left; width: 150px;}
.market-reports .market-report .report-text{float: left; width: calc(100% - 150px); padding-left: 25px;}
.market-reports .market-report .report-text p{font-size: 14px;}
.market-reports .market-report .report-text a{display: inline-block; margin-top: 10px; font-weight: 700; color: #EF8901;}

.report-form{float: left; width: 325px;}
.report-message{background: #f5f5f5; margin-top: 25px; padding: 20px; text-align: center; border: 1px #ddd solid;}

.advantages{background: #333; padding: 20px; color: #fff;}

.providers{display: flex; flex-wrap: wrap;}
.providers .provider{width: calc(25% - 10px); margin: 10px 5px; text-align: center;}
.providers .provider img{max-height: 35px;}
.providers .provider .img-link{display: block; padding: 35px 20px;}
.providers .provider .name-link{display: block; background: #f5f5f5; padding: 10px; font-weight: 700; transition: all .2s ease-in-out;}
.providers .provider:hover > .name-link{background: #ddd;}

/* LEGAL */

.legal h2{margin: 25px 0; font-size: 24px; text-align: center; text-decoration: underline;}
.legal h2:after{background-color: transparent;}
.legal h3{margin: 15px 0; font-size: 16px; text-decoration: underline;}

.legal p{margin: 15px 0;}
.legal a{text-decoration: underline;} .legal a:hover{text-decoration: none;}

.legal ol{margin: 15px 0;}
.legal ol li{margin-left: 20px; list-style: decimal;}

.legal ul{margin: 15px 0;}
.legal ul li{margin-left: 20px; list-style: disc;}
.legal ul ul{margin: 5px 0;}
.legal ul ul li{list-style: circle;}

.flex-col{display: flex; flex-wrap: wrap;}
.flex-col .col{flex: 1;}

/* TABLE */

.table-container{overflow: auto;}
.table{min-width: 1076px; line-height: 1.25; border: 1px #000 solid;}
.table>:not(caption)>*>*{padding: 0; color: inherit;}
.table .table-head{font-weight: 700; text-align: center;}
.table .table-head span{display: block; font-size: 12px;}
.table .table-row{display: flex; border-bottom: 1px #000 solid;}
.table .table-row:last-child{border-bottom: none;}
.table .table-row .table-column{padding: 15px; border-right: 1px #000 solid;}
.table .table-row .table-column:first-child{width: 350px;}
.table .table-row .table-column:not(:first-child){flex: 1;}
.table .table-row .table-column:last-child{border-right: none;}

.table .table-multi-row{flex: 1;}
.table .table-multi-row .table-column:first-child{flex: 1;}

@media screen and (max-width: 1000px){
	.legal{padding: 25px 0;}
}

/* FOOTER */

.footer{background: #f5f5f5; padding: 20px; font-size: 12px; font-weight: 700; text-align: center; color: #777; border-top: 1px #ddd solid;}
.footer .policy-links img{position: relative; top: -1px; padding-right: 2px;}
.footer .policy-links ul{display: block; margin: 10px 0 0; padding: 0;}
.footer .policy-links ul li{display: inline-block;}
.footer .policy-links ul li a{display: block; padding: 2px 7px;}

/* RESPONSIVE */

@media only screen and (max-width: 1350px){
	.header{padding: 0;}
	.header .contact{width: 100%; padding: 5px; text-align: left; border-bottom: 1px #ddd solid; order: 1;}
	.header .contact span{padding: 0 5px;}
	.header .contact .cta-btn{display: none;}
	.header .contact a{font-size: 14px;}
	.header .logo{padding: 15px; order: 2;}
	.header .navigation{width: calc(100% - 250px); padding: 15px; order: 3;}
	.header .navigation .show-mobile{display: inline-block;}
}
@media only screen and (max-width: 980px){
	.banner-content div{flex: none; width: 50%; margin: 10px 0;}
	.main-container{padding: 20px;}
}
@media only screen and (max-width: 768px){
	.col-lg-1, .col-lg-10, .col-lg-11 .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{padding-right: 0 !important; margin-bottom: 10px;}
	.banner-content div{width: 100%;}
	.market-reports, .report-form{float: none; width: 100%; padding: 0;}
	.providers .provider{width: calc(50% - 10px);}
	.table-responsive tr{display: table-row;}
	.table-responsive tr td{flex: none;}
}
@media only screen and (max-width: 480px){
	.grey-bar, .orange-bar{width: 75px;}
	.demo .btn{display: block; width: 100%; margin: 2px 0;}
	.benefits ul li{font-size: 14px;}
	.market-reports .market-report .report-image, .market-reports .market-report .report-text{float: none; width: 100%; padding-left: 0;}
}