/* -----------------------------------------------------*/
/*common elements*/
/* -----------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    font-family: 'Dosis', sans-serif;
    font-weight: 400;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    margin:0px;
    padding:0px;
}
.black_overlay{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right:0;
        width: 100%;
        height: 100%;
        background-color:#000;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
.PopupHeader{
    display:block;
    height:60px;
    width:100%;
    background-color:#000;
}
.QuickQuoteWindow{
        display: none;
        z-index:1002;
        overflow: auto;
        height:490px;
        width:768px;
        background-color: #000;
        position:fixed;
        margin: 0% auto;
        top:5%;
        left: 0;
        right: 0;
        padding-left:0px;
}
.IconSquareNew{
    display:block;
    float:left;
    width:33%;
    min-height:570px;
    height:auto;
    padding:30px;
}
.VectorImage2{
    display:block;
    width:60%;
    min-width:170px;
    min-height:170px;
    margin:auto;
    margin-top:20px;
    margin-bottom:30px;  
}
p{
    font-size:16px;
    line-height: 33px;
}
.SmlImageCustomer{
    width:60%;
    margin-left:20%; 
}
.SmlImageTop{
    display: block;
    width:500px;
    height:auto;
    margin:0 auto;
    margin-bottom:32px;  
}
.PhoneImage{
    display: block;
    margin:auto;
    width:261px;
    height:524px;
}
.CompImage{
    display: block;
    margin:auto;
    width:626px;
    height:471px;
}
H1{
    display:block;
    width: auto;
    font-size:48px;
    font-weight: 300;
}
H2{
    display: inline-block;
    width: auto;
    font-size:18px;
    font-weight: 400;
}
.SiteLogoImage{
    display:block;
    height:38px;
    width:auto;
    margin:0 auto;
}
.playbutton{
    display:block;
    height:160px;
    width:auto;
    margin:0 auto;
    margin-top:12px;
}
.playbutton:hover{
    border-radius: 360px;
    border: solid 6px #3298d8;
    background-color: #3298d8;
    box-shadow:  0 0 250px  rgba(50,152,216,0.9);
			-moz-box-shadow: 0 0 250px  rgba(50,152,216,0.9);
			-webkit-box-shadow: 0 0 250px  rgba(50,152,216,0.9);
			-o-box-shadow: 0 0 250px  rgba(50,152,216,0.9);
}
.HeaderMain{
    display: block;
    width:100%;
    height:77px;
    background-color: 000;
    padding-top:21px;
}
.MobileNavIcon{
    display:none;
    float:right;
    padding:0px;
    height: 32px;
    margin-top: 6px;
    margin-right:12px;
    cursor: pointer;
    color: #fff;
}
.InsertLogoSpace{
    display:inline-block;
    height:90px;
    margin-top:12px;
    background-color: aqua;
}
.NavMain{
    display:block;
    height:52px;
    width:100%;
    margin: auto;
}
.NavText{
    display:block;
    width:530px;
    height:20px;
    margin: auto;
    padding-top:15px;
}
.NavText2{
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}
.MainBkgImage{
    background-image: url(img/bkg1.jpg);
    min-height: 440px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.BkgImage2{
    background-image: url(img/sky2.jpg);
    min-height: 1000px;
    height:auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:100px;
}
.BkgImage3{
    background-image: url(img/gps.jpg);
    min-height: 1000px;
    height:auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:100px;
}
.FloatingTextSpace{
    display:inline-block;
    width:100%;
    min-height:300px;
    height:auto;
    color:#fff;
    padding:0px;
}
.FloatingTextSpace2{
    display:block;
    width:100%;
    min-height:700px;
    height:auto;
    color:#fff;
}
.FloatingInfoBlock{
    display:block;
    min-height:100px;
    height: auto;
    width:1200px;
    margin: auto;
}
.FloatingInfoBlock2{
    display:block;
    height: auto;
    width:1200px;
    margin: auto;
}
.MainFooter{
    display:block;
    min-height:360px;
    height:auto;
    width:100%;
    padding-bottom:12px;
}

.HeroTextBox{
    display: inline-block;
    width:53%;
    margin-left:23%;
    margin-right:23%;
    margin-top:180px;
    min-height:550px;
}
.HeroTextBox2{
    display: block;
    width:53%;
    margin-left:23%;
    margin-right:23%;
    min-height:250px;
    height:auto;
    text-align: center;
}
.HeroText{
    font-size: 100px;
    font-weight:200;
    line-height: 1.25;
    text-align: center;
}
.HeroText2{
    font-size: 20px;
    font-weight:300;
    line-height: 1.25;
    text-align: center;
}
.HeroTextBox3{
    display: inline-block;
    float:left;
    margin-left:40px;
    margin-top:48px;
    max-width:768px;
}
.LogoSpacerBlock{
    color: #fff;
    width:931px;
    display: block;
    min-height:30px;
    height: auto;
    padding-top:16px;
    margin: auto;
}
.FollowUsText{
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    width:140px;
    display: block;
    min-height:30px;
    height: auto;
    padding-top: 5px;
    margin: auto;  
}
.SocialButtonSpace{
     display: block;
    width:240px;
    display: block;
    min-height:77px;
    height: auto;
    margin: auto;
}
.SBSML1{
    display:block;
    float:left;
    height:70px;
    margin-top:4px;
    }

.SBSML2{
    display:block;
    float:left;
    height:70px;
    margin-left:15px;
    margin-top:4px;
    }
.SBSML3{
    display:block;
    float:left;
    height:70px;
    margin-left:15px;
    margin-top:4px; 
    }
.InsertLogoSpaceFooter{
    display:block;
    min-width:80px;
    height:70px;
    margin: auto;
    padding-top:20px;
    padding-bottom:26px;
    padding-left: 20px;
    padding-right: 20px;
}
.CopyrightText{
    line-height: 130%; 
    font-size:12px;
    margin-bottom:10px;
}
.TextBoxSpacer{
    display: block;
    width:500px;
    min-height:300px;
    padding:10px;
}
.TextBoxSpacer2{
    display: block;
    width:1000px;
    min-height:160px;
    height:auto;  
}
.TextBoxSpacer3{
    display: block;
    width:700px;
    min-height:160px;
    height:auto;
}
.TextBoxSpacer4{
    display: block;
    width:1000px;
    min-height:260px;
    
}
.TextBoxSpacer5{
    display: block;
    width:600px;
    height:200px;
    padding:10px;
}
.logoBlock{
    background:linear-gradient(
      rgba(0, 0, 0, 0.70), 
      rgba(0, 0, 0, 0.70)
    ),url(img/bkg8.jpg);
    min-height:80px;
    height:auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}
.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.SBSML1{
    display:block;
    float:left;
    height:70px;
    margin-top:4px;
    }

.SBSML2{
    display:block;
    float:left;
    height:70px;
    margin-left:15px;
    margin-top:4px;
    }
.SBSML3{
    display:block;
    float:left;
    height:70px;
    margin-left:15px;
    margin-top:4px; 
    }
/* -----------------------------------------------------*/
/*Float Controls*/
/* -----------------------------------------------------*/
.FloattoLeft{
 float:left;
}
.FloattoRight{
 float:right;
}
.FloatRight{
    float:right;
}
.FloatLeft{
    float:left;
}
/* -----------------------------------------------------*/
/*Customize Controls*/
/* -----------------------------------------------------*/
.SBSML1:hover {
    background:linear-gradient(
      rgba(0, 246, 255, 0.9), 
      rgba(72, 103, 170, 0.9)
    );
    border-radius: 60px;
    
}
.SBSML2:hover {
    background-color: aqua;
    border-radius: 60px;
    background:linear-gradient(
      rgba(29, 161, 242, 0.9), 
      rgba(56, 255, 2, 0.9)
    );
}
.SBSML3:hover {
    background-color:#02ff32;
    border-radius: 60px;
    background:linear-gradient(
      rgba(0, 246, 255, 0.9), 
      rgba(255, 0, 234, 0.9)
    );
}
.HeaderItem2:hover{
    text-decoration: none;
}
.MainBackgroundColor{
    background-color: #000;
}
.MobileNavCellColor{
    border-top:1px solid #333;
    background-color:#191919;  
}
.MobileNavCellColor:hover{
    border-top:1px solid #333;
    background-color:#333; 
}
#slideMenu{
    display:none;
    background-color: #000;
}
.WindowIconClose:hover{
    color:#31e9fa;
}
.HeaderBkgColor{
    background-color: #000;
}
.NavBkgColor{
    background-color: #222222;
    opacity: 0.9;
}
.H1Color{
    color:#fff;   
}
.H2Color{
    color:#fff;   
}
.H3Color{
    color:#fff;   
}
.FloatingTextSpaceColor{
    background-color:#121212;
}
.FloatingTextSpaceColor2{
    background-color:#07639a;
}
.MainTextColor{
    color:#fff;
}
.NavTextColor{
    color:#333;
}
.MainFooterColor{
    background-color: #000;
}
.HeroTextColor{
    color:#fff;}
.H2Color{
    color:#fff;
}
.ButtonBKGColor{
    background-color:#2ca9f3;
}
.MobileNavText:hover{
    color:#31e9fa;
    text-decoration: none;
}
.LinkStyle{
    color:#fff;
    text-decoration: none;
    cursor:pointer;
    text-decoration: none;
}
.LinkStyle:hover{
    color:#2ca9f3;
    text-decoration: none;
}
.LinkStyleNav{
    color:#fff;
    text-decoration: none;
    cursor:pointer;
    text-decoration: none;
    font-size:16px;
}
.LinkStyleNav:hover{
    color:#2ca9f3;
    text-decoration: none;
}
.LinkStyle2{
    color:#31e9fa;
    text-decoration: none;
    cursor:pointer;
}
.LinkStyle2:hover{
    color:#fff;
    text-decoration: none;
}
.CopyrightTextColor{
    color:#999;
}
.SmlImageVector{
    height:300px;
    width:300px;
}
.SmlImageAboutUs{
    height:200px;
    width:200px;
    border-radius:160px;
}
.LRGimg{
    height:476px;
    width:650px;
    margin-top:40px;
}
.PageSpacer{
    display: block;
    width:100%;
    height:20px;
}
.PageSpacer2{
    display: block;
    width:100%;
    height:60px;
    margin-bottom: 40px;
}
/* -----------------------------------------------------*/
/*Mobile Menu*/
/* -----------------------------------------------------*/

.WindowHeading{
    display: inline-block;
    float: left;
    color: #fff;
    margin-top:12px;
    margin-left:0px;
    margin-right:0px;
}
.TopMobileMenuBlock{
    display:block;
    width:100%;
    height:30px;
    text-decoration: none;
}
.MobileMenuBlock{
    display:block;
    width:100%;
    height:70px;
    margin-top:30px;
    text-decoration: none;
}
.MobileMenuBlockNormal{
    display:block;
    width:100%;
    height:70px;
    text-decoration: none;
}

.MobileNavText{
    font-family:'Lato';
    font-weight:400;
    font-size:18px;
    margin-left:11px;
    margin-top:20px;
    color:#fff;
    text-decoration: none;
}
.WindowIconClose{
    display: block;
    font-size:40px;
    text-decoration: none;
    color:#fff;
    margin-right:0px;
    padding-top:1px;
    padding-left:10px;
    padding-right: 15px;
    margin-top:1px;
}
.WindowIconCloseBlock{
    display: inline-block;
    float:right;
    width:40px;
    height:55px;
    padding:0px;
    text-decoration: none;
    background-color:#000;
}
/* -----------------------------------------------------*/
/*Buttons*/
/* -----------------------------------------------------*/
.MainBttnText{
    display:inline-block;
    text-align: center;
    margin-top:5px;
    font-size:14px;
}
.MainBttnText2{
    display:inline-block;
    text-align: center;
    margin-top:6px;
    font-size:14px;
}
.NavLrgBttnDisabled{
    display: inline-block;
    float:right;
    text-align: center;
    width: 160px;
    height: 30px;
    font-weight: 400;
    text-decoration: none;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
    cursor:pointer;
    color:#fff;
    border-radius:0px;
    margin-top:10px;
    margin-right:11px;
}
.NavLrgBttnDisabled:hover{
    color: #fff;
    border-radius:0px;
}
.NavLrgBttn{
    display: inline-block;
    float:right;
    text-align: center;
    width: 160px;
    height: 30px;
    font-weight: 400;
    text-decoration: none;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
    cursor:pointer;
    color:#fff;
    border-radius:600px;
    margin-top:10px;
    margin-right:11px;
}
.NavLrgBttn:hover{
    background-color: #07639a;
    color: #fff;
}



.NavLrgBttn2Disabled{
    display: none;
    float:right;
    text-align: center;
    width: 160px;
    height: 30px;
    font-weight: 400;
    text-decoration: none;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
    cursor:pointer;
    color:#fff;
    border-radius:0px;
    margin-top:10px;
    margin-right:11px;
}
.NavLrgBttn2Disabled:hover{
    color: #fff;
    border-radius:0px;
}
.NavLrgBttn2{
    display:none;
    float:right;
    text-align: center;
    width: 160px;
    height: 30px;
    font-weight: 400;
    text-decoration: none;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
    cursor:pointer;
    color:#fff;
    border-radius:600px;
    margin-top:10px;
    margin-right:11px;
}
.NavLrgBttn2:hover{
    background-color: #07639a;
    color: #fff;
}

/* -----------------------------------------------------*/
/*video*/
/* -----------------------------------------------------*/
.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
}
/* -----------------------------------------------------*/
/*sticky nav*/
/* -----------------------------------------------------*/

.navbar {
    display: block;
    overflow: hidden;
    position: fixed;
    top: 0px;
    width: 100%;
    text-decoration: none;
    border-radius: 0px;
    border: 0px solid #fff;
    z-index:1000;
}
.mainpagecontent {
    margin-top: 92px;
}
/* -----------------------------------------------------*/
/*new media*/
/* -----------------------------------------------------*/
@media screen and (max-width: 360px) {
    
    .SmlImageAboutUs{
    width:200px;
    }
    .SmlImageVector{
    width:180px;
    }
}
@media screen and (max-width: 410px) {
    .ProductHeaderText{
     font-size: 50px;   
    }
    .ProductTitle{
        font-size: 40px;
    }
    .ShowImgBlock{
    min-width:100%;
        
    }
.InsertLogoSpace{
    height:80px;
    margin-top:15px;
    
    }
    .LRGimg{
        width:100%;
        height:100%;
    }
}
@media (max-width: 500px) {
.chevron{
        height:40px;
        width:40px;
        padding-top:2px;
    }
.PhoneImage{
    float:none;
    width:60%;
    height:auto;
    margin-bottom:50px;
}
}
@media (max-width: 600px) {
    .ThankyouMessage{
        width:100%;
    }
}
@media (max-width: 700px) {
    .SmlImageTop{
        width:90%;
    }
     .SmlImage{
    width:100%;
    }
    .CompImage{
    float:none;
    width:80%;
    height:auto;
    margin-bottom:50px;
}
}
@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('img/waves.jpg') center center / cover no-repeat;
        height:60%;
    }
    .fullscreen-bg__video {
        display: none;
    }
}
@media screen and (max-width: 768px) {
.QuickQuoteWindow{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    margin-top:0px;
    }
    p{
        font-size:20px;
    }
.HeaderItem{
    display: none;
}
.HeaderItem2{
    display: none;
}
.MapsIcon{
    display:block;
    height:40px;
    color: #fff;
    margin-left:6px;
    margin-top:6px;  
}
.PhoneIcon{
    display:inline-block;
    height:40px;
    color: #fff;
    margin-left:20px;
    margin-top:6px; 
}
.navbar{
    height:200px;
}
.mainpagecontent {
    margin-top: 90px;
}
.SiteLogoImage{
    height:40px;
    display:block;
    margin:auto;
    
}
.HeaderMain{
        height:70px;
        padding-top:12px;
}
.LrgBttn{
        width:60%;
        margin-left:20%;
        margin-right:20%;
        height:40px;
}
.NumberSpacer{
        display: none;
}
#slideMenu{
    display:block;
    position:absolute; 
    right:-100%; top:0px; 
    width:100%;
    min-height:1920;
    height:100%; 
    transition: right .3s;
}
.HeroTextBox{
    margin-top:20px;
    width:96%;
    margin-left:2%;
    margin-right:2%;
}
.HeroTextBox2{
    width:96%;
    margin-left:2%;
    margin-right:2%;
}
.HeroTextBox3{
    width:96%;
    margin-left:2%;
    margin-right:2%;
}
.HeroText{
    text-align: center;
    font-size: 45px;
    font-weight:300;
    margin-bottom:30px;
    margin-top:60px;
}
}

@media screen and (max-width: 800px) {
.ProductTextColor{
    display: inline-block;
    width:100%;
    margin:0px;
    padding:12px;
}
.ProductImageLrg{
    display:block;
    margin: auto;
    float:none;
    min-width:300px;
}
.HideSHowSelect{
    display: none;
}
.ProductImageLrg22{
    display:block;
    margin: auto;
    float:none;
    width:50%;
    min-width:300px;  
    }
}
@media screen and (max-width: 932px) {
    .NavMain{
    display:block;
    height:52px;
    width:100%;
    margin: auto;
    padding-top:11px;
}
.NavText{
    display:none;
    height:40px;
    width:100%;
}
.NavLrgBttn{
    float:none;
    display: block;
    width:200px;
    height:30px;
    margin:auto;
    padding-top:4px;
    }
.NavLrgBttn2{
    float:none;
    display: block;
    width:200px;
    height:30px;
    margin:auto;
    padding-top:4px;
    }
.MainBttnText{
    display:block;
    margin-top:0px;
    font-size: 16px;
    }
.MobileNavIcon{
    display:inline-block;
}
.LogoSpacerBlock{
    width:210px;
    padding-bottom:12px;
}
.LogoSpacerBlock2{
    width:200px;  
}
}
@media screen and (max-width: 990px) {
.WWDBigIcon{
    display:block;
    height:180px;
    width:180px;
    margin:auto;
    margin-bottom:20px;
}
.WWDBkgCell{
    display: block;
    width:100%;
    height:auto;
}
.ShowImgBlock{
    display: block;
    width:60%;
    margin:auto;   
}
.WWDTextBlock{
    display: block;
    height:auto;
    width:100%;
    margin:0px;
    padding-bottom:60px;
    padding-top:60px;
    padding-left:20px;
    padding-right:20px;
}
.SVGButtonBlock{
    display: block;
    margin:auto;
    width:224px;
    height:80px;
    margin-top:30px;
}
.ScrollTextBox{
    display: block;
    height:auto;
    margin:auto;
    min-width:220px;
    max-width:250px;
    margin-top: 20px;
}
.SVGScrollButtonBlock{
    display: block;
    height:80px;
    width:220px;
    margin:auto;
    margin-top:10px;
    padding-left:70px;
}
}

@media screen and (max-width: 1000px) {
.SoftwareLogo{
        margin-top:20px;
        width:200px;
}
.SmlImageAboutUs{
    display:block;
    margin: auto;
}
.SmlImageVector{
    display:block;
    margin: auto;
}
.TextBoxSpacer2{
    float: none;
    width:100%;
    height:auto;
}
.TextBoxSpacer3{
    float: none;
    width:100%;
    height:auto;
}
.TextBoxSpacer4{
    float: none;
    width:100%;
    height:auto;
}
.TextBoxSpacer5{
    float: none;
    width:100%;
    height:auto;
}
}
@media screen and (max-width: 1032px) {
.FloatingInfoBlock1{
    width:100%;
    height:auto;
}
.FloatingInfoBlock2{
    width:100%;
    height:auto;
}
.FloatingInfoBlock3{
    width:100%;
    height:auto;
}
.FloatingInfoBlock4{
    width:100%;
    height:auto;
}
.FloatingInfoBlock5{
    width:100%;
    height:auto;
}
}
@media screen and (max-width: 1200px) {
 .FloatingInfoBlock{
    width:100%;
    height:auto;
}
.SmlImage{
    display:block;
    margin: auto;
}
}
@media screen and (max-width: 1220px) {
.TextBoxSpacer{
    float: none;
    width:100%;
    height:auto;
    padding:30px;
}
}
@media (max-width: 655px) {
 .IconSquareNew{
    display:block;
    width:100%;
    min-height:0px;
    height:auto;
    padding:30px;
}
}