@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Roboto-regular.eot');
  src: url('../fonts/Roboto-regular.eot?#iefix') format('embedded-opentype'),
       local('Roboto'),
       local('Roboto-regular'),
       url('../fonts/Roboto-regular.woff') format('woff'),
       url('../fonts/Roboto-regular.ttf') format('truetype'),
       url('../fonts/Roboto-regular.svg') format('svg');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  src: url('../fonts/Roboto-300.eot');
  src: url('../fonts/Roboto-300.eot?#iefix') format('embedded-opentype'),
       local('Roboto Light'),
       local('Roboto-300'),
       url('../fonts/Roboto-300.woff') format('woff'),
       url('../fonts/Roboto-300.ttf') format('truetype'),
       url('../fonts/Roboto-300.svg#Roboto') format('svg');
}

html {
    margin: 0;
    padding: 0;
}

body {
    background-color: white;
    text-align:center;
    font-size: 14px;
    font-family: 'Roboto',Verdana, Helvetica, Sans-Serif;
    font-weight: 300;
    color: #002240;
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 24px;
    font-weight: 300;
    line-height: 28px;
    margin-top: 40px;
    color: #e3001a;
}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    text-align: center;
}

.logo {
    width:222px; 
    padding-top: 40px;
    padding-bottom:40px;
}

header .content-wrapper {
    padding-top: 20px; 
    border-top: solid 10px #D82914;
    background: url(../Images/header-backgroundimage.jpg?vers=2) no-repeat center center; 
    background-size: cover;
}

.footer {
    position: relative;
    text-align: center;
    clear: both;
    width: auto;
    width: initial;
    margin-right: 0;
    padding-top: 50px;
}

.GetStartedScreen {
    display:block;
}

.GetStarted {
    float:right;
    margin: 30px;
    padding: 8px;
    border-radius: 4px;
    background-color: #EA2916;
    color: white;
}

.GetStarted:hover {
    background-color:  #D92312; 
}

.GetStartedMobile {
    display:none;
}

.GetStartedIcon {
    width: 16px;
    height: 15px;
    padding-right:8px; 
    float: left;
}


/* site title
----------------------------------------------------------*/
.site-title {
    color: white;
    font-size: 48px;
    margin: 0;
    text-align:center;
}
.site-text {
    color: white;
    font-size: 18px;
    max-width: 750px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom:40px;
    line-height:26.1px;
    display:block;
}

form {
    text-align: center;
    margin: 0 auto;     /* centres it !*/
    display: block;
}
.core-content {
    max-width:720px;
    margin: 0 auto;
}

#menu {
    overflow: hidden;
    background-color: #D82914;
    height:50px;
    z-index:2000;
}
#divMenuRight {
     float:right;
}

.anchor{
  display: block;
  height: 50px; /*same height as header*/
  margin-top: -50px; /*same height as header*/
  /*visibility: hidden;*/
}

.sticky {
    position:sticky;
    position: -webkit-sticky;
    top: 0px;
    width:100%;
}

#menu a {
    background-color: #ac2010;
    border: 1px solid #991d0e;
    font-size: 1em;
    padding:7px;
    color: #fff;
    margin-right:0px;
    text-decoration:none !important;
    margin-left:-5px;
}
#menu .solo {
        border-radius: 4px 4px 4px 4px;
}
#menu .left {
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}
#menu .right {
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
#menu a:hover {
    background-color: #80170B;
    border-color: #72150A;
}

a {
    text-decoration: none;
    color: #247BB5;
}
a:hover {
    color: #1A5C87;
}

.formContact {
    max-width: 360px; /* 750px; */
    margin: 0 auto;
}

.h2Header {
    float:left;
}
h2 {
    text-align:left;
    font-size:24px;
    font-weight:normal;
    margin-top:40px;
}

#divSuccess {
    margin-top: 40px;
    padding: 20px;
    border: 1px solid #4caf50;
    border-radius: 6px;
    text-align: left;
    background-color: #EDF7ED;
}

#divSuccess .title {
    color: #4caf50;
    font-size: 24px;
    margin: 0;
}

#divAntenna {
    float:right; 
    text-align:left;
}
#imgAntenna {
    width:420px;
}

#grdAltAntenna {
    border-color:#DEDEDE;
}
#divAlternateAntennas {
    float:right;
    position:relative; 
    width:40%; 
    z-index:1000; 
    text-align:right;
}
#divAltAntennas {
     display:none; 
     position:absolute; 
     top:72px; 
     right:0px;
}
#divAltAntennas table {
    background-color:#F2F2F2;
    border-color:#DEDEDE;
    cursor:pointer;
}
#divAltAntennas table .k-alt {
    background-color:#F2F2F2;
    border-color:#DEDEDE;
}
#divAltAntennas .k-grid tr:hover {
  background: transparent;
  background-color:#e5e5e5;
}
#divAltAntennas .k-header {
    background-color:#F2F2F2;
    border-color:#DEDEDE;
}
#divAltAntennas .k-grid-header {
    background-color:#F2F2F2;
    border-color:#DEDEDE;
}
#divAltAntennas .k-grid td {
    border-color:#DEDEDE;
}

#btnAltAntennas {
     margin-top:40px; 
}

#altAntenna {
    float:right;
    border:1px solid grey;
    border-radius:4px;
    padding:10px;
    padding-bottom:20px;
    cursor: pointer;  
    opacity:0.6;
    display:none;
}

#altAntenna label {
    margin-top:5px !important;
}

#divInstallationImage {
    width:350px;
    max-width:100%;
}
#divInstallationImage img {
    max-width:100%;
}
#grdEquipment {
    border-color:#DEDEDE;
}

#divParts {
     float:right; 
     max-width:350px;
}
#divParts table {
    background-color:transparent;
    border-color:#DEDEDE;
}
#divParts table .k-alt {
    background-color:transparent;
    border-color:#DEDEDE;
}
#divParts .k-header {
        border-color:#DEDEDE;
}
#divParts .k-grid {
    border-color:#DEDEDE;
}
#divParts .k-grid td {
    border-color:#DEDEDE;
}
#divParts table tr td:first-child {
    border-right-width:1px;
}
#divParts table tr th:first-child {
    border-right-width:1px;
}
#divParts .k-grid tr:hover {
  background: transparent;
}
#divParts .k-grid-header {
    background-color: transparent;
    border-width: 0 1px 1px 0;
    border-color:#DEDEDE;
}
#divParts .k-header {
    background-color: transparent;
    border-width: 0 0 1px 0;
}
#divStockists {
    width: 100%;
    padding-bottom: 60px;
    margin-top: 60px;
    margin-bottom: 20px;
    background-color: #F2F2F2;
}
#divStockists .k-grid table {
    border-collapse:collapse;
}
#divStockists table tr {
    background-color:transparent;
    border-color:#DEDEDE;
    border-collapse:collapse;
    border-width: 0 0 1px 0;
    border-style: solid;
}
#divStockists table .k-alt {
    background-color:transparent;
    border-color:#DEDEDE;
}
#divStockists .k-grid tr:hover {
  background: transparent;
}
#divStockists h2 {
    margin-top:0;
}
#divStockists input[type=button] {
    width:100px;
}
    .gridMobile {
        display:none;
    }
    #divStockists td {
        border:none;
    }
#divTransmitter input[type=button] {
    width:150px;
}
#stockists {
    float:left;
}
#grdStockist {
    background-color:#F2F2F2;
        border-color:#DEDEDE;
}
#grdStockist .k-alt {
    /*background-color: inherit !important;*/
}
#divEnquireNow {
    text-align:left;
    background-color: #F2F2F2;
}
#divEnquireNow label {
    margin-top:5px;
}
#divEnquireNow fieldset {
    width:300px;
}
#divEnquireNow h2 {
    margin-top:40px;
}
#divEnquireNow p {
    max-width:400px;
}
.k-button .k-button-icontext .k-grid-EnquireNow .gridFull {
    color: #247BB5 !important;
}
#divEnquireNow button :hover {
    color: #1A5C87;
}
.divEnquireNow {
     height:450px; 
     display:none;
}
#divXmtChange {
    margin-top: 40px;
    padding: 20px;
    border: 1px solid #4caf50;
    border-radius: 6px;
    text-align: center;
    background-color:white;
    opacity:0.9;
    position:fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    display:none;
}
.xmtLabel {
 }

#divElevation {
    margin:0 auto;
}

#elevation_chart {
    z-index:-1; 
    position:inherit; 
    margin-left:-50px;
}

#elevHome {
     float:left; 
     margin-left:25px; 
     z-index:1; 
     position:relative;
}
#elevWifi {
     float:right; 
     margin-right:25px; 
     z-index:1; 
     position:relative;
}
#divEmailForm {
    width: 100%;
    margin-bottom: 20px;
    background-color: #F2F2F2;
}
#divSendReport {
    padding-top: 5px;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
    text-align:left;
    width:360px;
}

fieldset .tabStrip {
    width:300px;
}

.column1 {
    /*float: left;*/
    height: 100%;
    margin-right: 0px;
}

.column2 {
    float: right;
    height: 100%;
    margin-right: 0px;
}

.outlet-matrix {
    text-align: left;
    clear: both;
    width: auto;
    width: initial;
    margin-right: 0;
    padding-top:40px;
}

    fieldset legend {
        display: none;
    }

    fieldset ol {
        padding: 0;
        list-style: none;
    }

    fieldset ol li {
        padding-bottom: 5px;
    }

label {
    display: block;
    margin-top:20px;
}

label.required:after {
    content: "*";
    color: red;
    padding-left:3px;
}

label.checkbox {
    display: inline;
}
label.inline {
    display: inline;
}
label.warning {
    color: brown;
    margin-top:0;
    font-size:medium;
}

input, textarea {
    border: 1px inset #DEDEDE;
    border-color: rgba(0,0,0,.25);
    color: #333;
    font-size: inherit;
    margin: 5px 0 6px 0;
    padding: 10px;
    width: 338px;       /* 360 - padding x 2 - border x 2 */
    display: block;
    border-radius: 6px;
    margin-top: 8px;
}

textarea {
    height: 260px;
    font-family: 'Roboto', Verdana, Helvetica, Sans-Serif;
}

div .radioGroup {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color:#DEDEDE; 
    padding-top:5px;
    padding-bottom:20px;
    padding-left: 0px;
    padding-right:0px;
}

#divNumFM {
    border-bottom-width: 0px;
}

.main-content .k-datepicker, .k-dropdown {
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    display: block;
    border-radius: 6px;
    margin-top: 8px;
}
    
.main-content .k-dropdown {
    width: 358px;
}
    
.main-content .k-picker-wrap, k-dropdown-wrap {
    border: 1px inset;
    border-color: rgba(0,0,0,.25);
    border-radius: 6px;
}
    
.main-content .k-select {

}
    
.main-content .k-picker-wrap, .k-state-default {
    padding-top: 5px;
    padding-left: 5px;
}

/* margin-left counters the padding-left above, so the dark grey doesn't show behind  */
.main-content .k-input {
    background: #f5f5f5;
    margin-left: -5px;     
    margin-top: -5px;
    padding-left: 5px;
    padding-bottom: 8px;
    color: #002240;
}

footer {
    font-size:10pt;
}

.k-radio {
    padding: 0px;
}
.k-radio-label {
    padding-right:18px;
    margin-top:10px;
}
.k-radio:checked+.k-radio-label:after {
    background-color:#247BB5;
}

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

    input[type="submit"],
    input[type="button"],
    button {
        background-color: #247BB5;
        color:white;
        cursor: pointer;
        font-size: 1em;
        padding: 7px;
        /*margin-right: 8px; btnFindAntenna needs this to be removed so shows centred*/
        display: inline;
        border:1px solid #206DA1;
        width:auto;
        border-radius:4px;
        -webkit-appearance: none;
    }

    input[type="submit"]:hover,
    input[type="button"]:hover,
    button:hover {
        border-color: #175178;
        background-color: #1A5C87;
    }

.SecondButton {
    background-color:#B5B5B5 !important;
    border-color:#A1A1A1 !important;
}
.SecondButton:hover {
    background-color: #878787 !important;
    border-color: #787878 !important;
}
.k-grid tbody tr td 
{
    vertical-align: top
}
.k-grid-header {
    background-image:none!important;
}
.k-grid td {
    border-width: 0 0 1px 0;
}
    #btnFindAntenna {
        width:176px;
        font-size:18px;
        margin-top:40px;
}

    .projectType
    {
        background-color: white !important;
        border:2px solid #005795 !important;
        color:#005795 !important;
        cursor: pointer !important;
        font-size: 1.2em !important;
        font-weight: 600 !important;
        padding: 7px !important;
        margin-right: 8px !important;
        display: inline !important;
        width: 200px !important;
    }

        .projectTypeSelected
    {
        background-color: #005795 !important;
        color:white !important;
        cursor: pointer !important;
        font-size: 1.2em !important;
        font-weight: 600 !important;
        padding: 7px !important;
        margin-right: 8px !important;
        display: inline !important;
        width: 200px !important;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}
/***** COPY TO HERE */

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    display: block;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-errors ul {
    list-style-type:none;
}
.validation-summary-valid {
    display: none;
}


/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

/* SPECIFICATIONS */

.spec-column2 {
    height: 100%;
    margin-right: 0px;
}
.specification .textWithLabel {
    width: 180px;
    display: inline;
    float: left;
    margin-right: 0px;
}
.specification input {
    width: 130px;
}

.specification .chk-label {
    margin-top: -20px;
    margin-left: 20px;
}

.specification input[type="checkbox"] {
    background: transparent;
    border: inherit;
    width: 13px;
    display: inline;
}

.specification .chkWithLabel {
    width: 180px;
    display: inline;
    float: left;
    margin-right: 0px;
}

.wide {
    width:95%;
}

.checkboxes {
    padding-top: 20px;
    width: 100%;
}
/********************
*   Mobile Styles   *
********************/

@media only screen and (max-width: 750px) { /*, screen and (max-device-width: 750px) {*/

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    .radioGroup {
        width: calc(100% + 10px);
    }
    /* logo */
    .logo {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .site-title {
        font-size: 36px;
    }

    .site-text {
        padding-top: 15px;
        padding-bottom: 0px;
        line-height: 20px;
    }
    #menu {
        /* cater for margins on main form */
        /*margin-left:-10px;
        margin-right:-10px;*/
    }
    #divMenuRight {
        margin-right:10px;
    }
    .sticky {
        margin-right:0px;
    }
    .formContact {
        margin-left:10px;
}
    .core-content {
        margin-left:10px;
        margin-right:10px;
    }
    .h2Header {
        float:none;
    }
    #divAntenna {
        float:left;
        text-align:left;
    }
    #imgAntenna {
        width:320px;
        margin-top:10px;
    }
    #divAlternateAntennas {
        float:left;
        text-align:left;
    }
    #divAltAntennas {
     top:38px; 
     right:auto;        /* back to left-aligned */
    }
    #btnAltAntennas {
        margin-top:5px;
        margin-bottom:10px;
}
    #divParts {
        float:none;
    }
    .gridFull {
        display:none;
    }
    .gridMobile {
        display:inline;
    }
/*.k-button.k-button-iconcontext.k-grid-EnquireNow {
    border-style: none !important;
    border:none !important;
    color: #247BB5 !important;
  }*/


    #divElevation {     /* necessary to make elevation chart centred */
        max-width:360px;
    }
    #elevation_chart {
    margin-left:0px;
}
    #elevHome {
     margin-left:50px; 
}

    #elevWifi {
     float:left; 
     margin-right:0px; 
     margin-left:210px;
}

    #divSendReport fieldset {
        width:330px;
    }
    .xmtLabel {
        display:block;
    }

    .GetStartedScreen {
        display:none;
    }

    .GetStartedMobile {
        display:inline-block;
    }

    .GetStarted {
        margin-top:5px;
        font-size:12px;
    }

    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        /*padding-right: 10px;
        padding-left: 10px;*/
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* removed margin-right because EnquireNow within stockists caused overflow */
    fieldset {
        width: auto;
        width: initial;
        /*margin-right: 32px;*/
        padding-right: 16px;
        max-width:100%;
    }

    /* Make text boxes full width*/
    /*#divEnquireNow fieldset {
    width:200px;
}*/

    .k-radio-label {
    padding-right:10px;
    }

    hr {
        width:100%;
        padding-right:16px;     /* to align with input textbox in fieldset */
    }
    input, textarea {
        width: 100%;
        padding-right:0px;
        margin-right:10px;
    }

    textarea {
        height: 100px;
}

    .column1 {
        float: none;
        width: auto;
        width: initial;
    }

    .column2 {
        float: none;
        width: auto;
        width: initial;
    }

    input[type="submit"],
    input[type="button"],
    button {
        padding: 7px;
        display: inline;
    }
    #btnFindAntenna {
        width: calc(100% + 16px);       /* add on the padding-right of fieldset */
    }

    #divTransmitter input[type=button] {
        width:110px;
    }

    .main-content .k-dropdown {
        width: auto;
        width: initial;
        margin-right: -20px;
    }

 .specification .col1 {
    margin-right: 0px;
}
.specification .textWithLabel {
    min-width: 130px;
    width: 45%;
}
.specification .chkWithLabel {
    margin-bottom: 10px;
} 
.checkboxes {
    width: 100px;
}

 .specification input[type=number] {
     min-width: 80px;
     width: 60%;
 }

 .k-dropdown {
     max-width:300px;
 }


    /* footer
    ----------------------------------------------------------*/
    .footer {
        padding-right: 8px;
    }

    footer {
        margin-bottom:80px;
    }

    #divAltAntennas .k-grid td {
        padding-right:0;
        padding-left:0;
        max-width:270px;
    }

}

@media only screen and (max-width: 330px) {
    #elevWifi {
        float:right;
        margin-right:0px;
        margin-left:0px;
    }
}