/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.mask{
    display: none;
    position: fixed;
    top:0;
    right:0;
    left:0;
    bottom: 0;
    background: rgba(0,0,60,.8);
    color:#fff;
    z-index: 10000;
}

.alert-pop{
    text-align: center;
    margin-top: 150px;
    border: 1px solid rgba(0,0,120,1);
    padding: 50px;
    background: rgba(0,0,60,.9);
}

body{
/*    padding: 0 50px;*/
    font-family: 'Oxygen', sans-serif;
    background: #ccc;
    color:#999;
}

h2,h3 {
    color:#000;
}
.logo{
    width: 200px; 
    margin:-15px 0 0;
    position: relative;
    
}

h1, h2, h3, h4{
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
}

.navbar-custom{ 
    background: #fff; 
    height: 75px;
    position: relative;
    border-radius: 0; 
    margin: 0 0; 
    
    border:none;
}

.nav > li > a{
    padding: 26px;
}

 
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #fff !important;
  
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #0089cf !important;
  
}
.navbar-default .navbar-nav {
    font-family: 'Oxygen', sans-serif;   
    font-weight: 400;
    font-size: 12pt;
}

.navbar-default .navbar-toggle{
    border-color: #007dc5;
    margin-top: 20px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #2D396F !important;
    font-weight: 400;
    background: none !important;
    

}

.search-bar{
    padding: 5px;
}

.searchTerm{
    padding: 8px 15px;
    border:1px solid #ccc;
    color:#efefef;
}

.searchButton{ 
   padding: 3px 5px;   
    background: none; 
    border:none;
    margin-left: -35px;
    margin-top:5px;
    font-size: 14pt;
    color:#ccc;
}


.slider{
    width: 100%;
    height: 500px;
    background: #000;
    background-size: cover;
    background-position: center center;
}

.pageheader{
    width: 100%;
    height: 400px;
    background: #000;
    position: relative;
    background-size: cover;
    background-position: center center;
}

.banner-cta{
    color:#fff;
    font-family: 'Oxygen', sans-serif;
    width: 50%;
    margin-top: 100px;
    z-index: 100;
    position: relative;
}

.banner-cta h1{    
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
.overlay-texture{
    background: rgba(0,0,50,.0);
    width: 100%;
    height: 500px;
    position: absolute;
    top:0;
    left: 0;
    opacity: 1;
    z-index: 1;
}
.btn-custom1{
    border-radius: 0;
    padding: 10px 40px;
    background: #0089cf;
    color:#fff;
    margin: 30px 0;
    
}

.btn-custom1 span{
    display:none;
    width: 20px;
    height: 1px;
    content: '';
    background: #fff;
    float:left;
    margin-top: 10px;
    margin-right: 5px;
}

.btn-custom1:hover{
    color:#fff;
    outline: 1px solid #0089cf;
    background: #0178b5;
    outline-offset: 5px;
     transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
}


.home-section1{
    display: block;
    padding: 40px 0 80px;
    background: #333;
    color:#fff;
}

.home-section1 ul {
    padding:0 0;
}

.home-section1 ul li{
    border-bottom: 1px solid #555;
    padding: 20px 0;
    list-style: none;
     
}

.home-section1 ul li a{
    color:#fff;
}

.home-section1 ul li:hover, .home-section1 ul li a:hover{
    padding-left: 50px;
    cursor: pointer;
    transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
    color:#0089cf;  
    
}
 

.products{
    display: block;
    min-height: 500px;
    background: #fff;
    padding-top: 30px;
    padding-bottom: 50px;
    
}
.products > div > div > div > div {
    position: relative;
    background-size: cover;
    background-position: center center;
    
}

.products > div > div > div > div > a{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(0,0,65,.8);
    text-align: Right;
    padding-top: 20px; 
    padding-right: 20px; 
    background: rgba(0,0,0,.8);
    font-size: 14pt;
    color:#fff;
    opacity: 0;
     transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -moz-transition: all ease-in-out .5s;
}

.products > div > div > div > div > a:hover{
    opacity: 1;
     transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
}
.products > div > div > div > div > div{
    background: rgba(0,30,80,0.9);
    color:#fff;
    padding: 15px 30px;
    position: absolute;
    bottom:0;
    width: 100%;
}

.products > div > div > div > div > div > h4{
    margin: 5px 0;
}

.products h3:after, .professional-services h3:after, .cases h3:after{
    display: block;
    content: '';
    width: 100px;
    height: 2px;
    background: #0089cf;
    margin: 15px 0;
}

.thumb-narrow{
    display: block;
    height: 590px;
    background: #efefef;
}

.thumb-wide{
    display: block;
    height: 285px;
    margin-bottom: 20px;
    background: #efefef;
}

.professional-services{
    background: #f4f4f4; 
    min-height: 500px;
    padding-bottom: 50px;
    padding-top: 30px;
}
 

.professional-services > div > div > div > div{
    background: #ccc;
    display: block; 
    padding: 250px 0 0;
    overflow: hidden;
    height: 350px;
    position: relative;
    background-size: cover;
    background-position: center center;
    margin-bottom: 20px;    
}

.professional-services > div > div > div > div > div{
    background: rgba(0,0,0,.8);
    color:#fff;
    display: block;
    padding: 30px; 
    height: 350px;
    position: relative; 
     transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
}


.professional-services > div > div > div > div:hover{
    padding-top:0px;
     transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
}

 

.professional-services > div > div > div > div > div h4{
    font-weight: 600;
    margin-bottom: 50px;
}



.cases{
    background: #333;
    background-image: url('../img/dark_fish_skin.png'); 
    display: block;
    min-height: 500px;
    color:#fff;
    padding-top: 50px;
    padding-bottom: 50px;
}


.case-item{
    height: 300px; 
    padding: 20px;
}

.case-item > div{
    display: block;
    width: 100%;
    background: #000;
    height: 100%;
    position: relative;
}

.case-item > div h5{
    padding: 2px 20px;
}
.case-item > div > div{
    display: block;
    background: #ccc;
    height: 200px;
    background-size: cover;
    position: relative;
}
.case-item > div:after{
    display: block;
    content: '';
    opacity: .5;    
    background: #0089cf;
    background-image: url('../img/play-btn.svg');
    width: 50px;
    height: 50px;
    position: absolute;
    top:0;
    right: 0;
}

.case-item a{
    background: rgba(0,20,70,.8);
    position: absolute; 
    padding-top: 130px;
    width: 100%;
    height: 300px;    
    top:0;
    left:0;
    text-align: center;
    color:#fff; 
    outline: 1px solid #fff;
    outline-offset: -20px;
    opacity: .0;
}
.case-item a:hover{
    opacity: 1;
}
.about{
    display: block;
    width: 100%; 
    height: 500px;
    position: relative;
}

.about-content{
    background: rgba(0,0,0,.8);
    padding: 50px;
    color:#fff;
    margin-top: 100px;
}


.moto{
    background: #fff;
    min-height: 500px;    
    color:#fff;
}

.moto > div > div{
    background: rgba(0,0,60,0.9); 
    padding: 50px;
    margin-top: -50px;
}

.moto h5{
    background: #0089cf;
    display: inline-block;
    padding: 5px 15px;
    margin: 0 0;
    text-transform: uppercase;
}

.video-bg { 
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);    
    background-size: cover;
    transition: 1s opacity;
    opacity: 0.5;
}
.cta-download-brochure{
    background: #03a9f4;
    display: block;
    padding: 50px 20px;
    text-align: center;
    color:#fff;
}

.cta-download-brochure h2:after{
    display: block;
    width: 80px;
    height: 2px;
    content:'';
    background: #fff;
    margin: 15px auto 15px;
}
.footer{    
    background: #0089cf;
    min-height: 200px;
    padding: 30px;  
    color:#b8d8ff; 
}

.footer h5{
    font-weight: 600;
    color:#fff;
}

.footer ul{
    padding: 0 0;
}
.footer ul li{
    list-style: none;
}

.footer ul li a{
    color:#b8d8ff;
}

.social{
     
}

.social li{
    list-style: none;
    color:#03a9f4;
    float:left;
    margin-right: 15px;
    font-size: 18pt;
    
}

.social li a{
    color:#fff;
}
.copyright-note{
    background: #000;
    text-align: center; 
    padding: 25px;     
}

.copyright-note > .container p{
    color:#fff;

 }
 .about-emc{
     background: #204d74;
     color:#fff;
     padding-top: 50px;
     padding-bottom: 50px;
 }  
 

 .about-emc > div > div > h1{ 
     font-weight: 800;
     font-size: 80pt; 
     position: relative;
     opacity: 0.05; 
     margin: -5px 0 25px;
     line-height: 100%;
     
 }
   
.why-netemc{
     padding-top: 30px;
     padding-bottom: 50px;
     background: #fff;
 } 
 .why-netemc h2, 
 .netemc-features h2, 
 .NetEMC-How-does-it-work h2, 
 .applicable-areas h2,  
 .netemc-reviews h2, 
 .compassmate-applicable-areas h2{     
     text-align: center;
 }
 .why-netemc h2:after, 
 .netemc-features h2:after,  
 .NetEMC-How-does-it-work h2:after, 
 .applicable-areas h2:after , 
 .netemc-reviews h2:after {
     display: block;
     width: 80px;
     height: 2px;
     background: #007dc5;
     content: '';
     margin: 10px auto 30px;
 }
    
 .why-netemc > div > div > div{
    background: #efefef;
    display: block;
    min-height: 250px;
    padding: 30px;
    margin-bottom: 20px;
    text-align: center;
 }
 
 .why-netemc > div > div > div h5{
    font-weight: 600;
    color:#0178b5;
    
 }
    
 .netemc-reviews{
     background: #eafbfd;
     padding: 50px 20px;
 }
 
 .netemc-reviews h4{
     color:#007dc5;
     font-size: 11.5pt;
 }
 
 
.netemc-features{
     background: #efefef;
     min-height: 400px;
     padding-top: 20px;
     padding-bottom: 30px;
 }
 
 .netemc-features > div > div > div{
     background: #fff;
     padding: 20px;
     text-align: center;
     margin-bottom: 20px;
     height: 230px;
     color:#333;
     transition: all ease-in-out .3s;
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
 }
 .netemc-features > div > div > div:hover{     
     margin-top: -10px;
     transition: all ease-in-out .2s;
    -webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    background: #0089cf;
    color:#fff; 
    outline: 1px solid #fff;
    outline-offset: -10px;
    
 }
 
 .netemc-features > div > div > div:hover >h5{
     color:#fff;
 }
 .netemc-features > div > div > div > h5{
     font-weight: 600;
     color:#007dc5;
 }
 
 .NetEMC-How-does-it-work{
     display: block;
     background: #faf6fb;
     min-height: 300px;
     padding: 50px 20px;
 }
 .NetEMC-workflow{
     border-bottom: 1px solid #f8e3f0;
     padding: 10px 0;
 }
 .NetEMC-workflow:hover > h1{
     background: #03a9f4;
     color:#fff;
     cursor: pointer;
     transition: all ease-in-out .2s;
    -webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
 }
 
 .NetEMC-workflow h3{
     color:#633991;
 }
 
 .NetEMC-workflow p{
     color:#666;
 }
 
 .NetEMC-workflow h1{
     background: #fff;
     color:#03a9f4;
     float:left;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     padding: 20px 15px;
     text-align: center;
     line-height: 100%;
     margin-right: 20px;
     margin-top: 8px;
     transition: all ease-in-out .3s;
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
 }
 
 .NetEMC-How-does-it-work img{
     display:block;
     width: 350px;
     margin: -15px auto 20px;
 }
.applicable-areas{
     display: block;
     background: #efefef;
     min-height: 300px;
     padding: 50px 20px;
 }
 
 .emc-area{
     height: 350px;
     background: #fff;
     margin: 20px 15px;
     padding: 20px 30px;
     border-top:1px solid #03a9f4;
 }
 
 
.about-compassmate{
     background: #46130d;
     color:#fcdbd7;
     padding-top: 50px;
     padding-bottom: 50px;
 }  
 
 .about-compassmate > div > div > h1{ 
     font-weight: 800;
     font-size: 80pt; 
     position: relative;
     opacity: 0.05; 
     margin: -5px 0 25px;
     line-height: 100%;
     
 }
 
 .why-compassmate{
     padding-top: 30px;
     padding-bottom: 50px;
     background: #fff;
 } 
 
   
 .why-compassmate > div > div > div{
    background: #f4f4f4;
    display: block;
    min-height: 280px;
    padding: 30px;
    margin-bottom: 20px;
    text-align: center;
 }
 .why-compassmate h2{
     text-align: center;
 }
 .why-compassmate > div > div > div h5{
    font-weight: 600;  
    color:#ed1c28;
 }
 
 .why-compassmate h2:after{
     display: block;
     width: 80px;
     height: 2px;
     background: #ed1c28;
     content: '';
     margin: 10px auto 30px;
 }
 
 
 .compassmate-workflow{
     border-bottom: 1px solid #f8e3f0;
     padding: 10px 0;
 }
 
 .compassmate-workflow:hover > h1{
     background: #ed1c28;
     color:#fff;
 }

  .compassmate-workflow h1{
     background: #fff;
     color:#ed1c28;
     float:left;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     padding: 20px 15px;
     text-align: center;
     line-height: 100%;
     margin-right: 20px;
     margin-top: 8px;
     transition: all ease-in-out .3s;
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
 }
 
 .compassmate-applicable-areas{
     background: #fff;
     padding: 50px 20px;
 }
 .compassmate-applicable-areas > div div > div {
     display: block;
     height: 180px;
     background: #666;
     margin-bottom: 20px; 
     color: #fff;
     padding: 30px 20px;
     outline: 1px solid #999;
     outline-offset: -15px;
     transition: all ease-in-out .3s;
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
 }
 .compassmate-applicable-areas > div div > div:hover{
     outline: 1px solid #ed1c28;
     outline-offset: 10px;
     transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
    background: #ed1c28;
    margin-top: -10px;
 }
 .compassmate-applicable-areas > div div > div  >h4{
     text-align: center;
 }
 
 .compassmate-applicable-areas h2:after{
     display: block; 
    width: 80px;
     height: 2px;
     background: #ed1c28;
     content: '';
     margin: 10px auto 30px;
 }
 
 
 .about-contruct{
     background: #534e5a;
     color:#fff;
     padding-top: 50px;
     padding-bottom: 50px;
 }  
 

 .about-contruct > div > div > h1{ 
     font-weight: 800;
     font-size: 80pt; 
     position: relative;
     opacity: 0.05; 
     margin: -5px 0 25px;
     line-height: 100%;
     
 }
 
 
 
 .why-contruct{
     padding-top: 30px;
     padding-bottom: 50px;
     background: #fff;
 } 
 
   
 .why-contruct > div > div > div{
    background: #f9f7fd;
    display: block;
    min-height: 400px;
    padding: 30px;
    margin-bottom: 20px;
    text-align: center;
 }
.why-contruct h2,
.contruct-stage h2{
     text-align: center;
     color:#534e5a;
 }
 .why-contruct > div > div > div h5{
    font-weight: 600;  
    color:#534e5a;
 }
 
 .why-contruct h2:after,
 .contruct-stage h2:after{
     display: block;
     width: 80px;
     height: 2px;
     background: #534e5a;
     content: '';
     margin: 10px auto 30px;
 }
 
 .contruct-feedback{
     background: #fcfaff;
     padding: 50px 20px;
 }
 
 .contruct-feedback h2{
     color:#333;
     text-align: center;
 }
.contruct-feature h2{     
     text-align: center;
     color:#fff;
 }
 .contruct-feedback h2:after, .contruct-feature h2:after {
     display: block;
     width: 80px;
     height: 2px;
     background: #534e5a;
     content: '';
     margin: 10px auto 30px;
 }
 
 .contruct-feature{
     padding: 30px 20px 50px;
     background-image: url('../img/female.jpg');
     background-size: cover;
     -moz-background-size: cover;
     -webkit-background-size: cover;
     background-position: top center;     
 }
 
 .contruct-feature > div > div > div{
     background: rgba(255,255,255,.95);
     padding: 30px 20px;
     color:#999;
     border-radius: 5px;
     min-height: 220px;
     margin-bottom: 20px;
     border-left: 3px solid #1c97a8;
 }
 
 .contruct-feature > div > div > div h4{
     color:#1c97a8;
 }
 
 .contruct-stage{
     padding: 30px 20px 50px;
     background: #fff;
 }
  
 .contruct-stage > div > div > div{
     border-bottom: 1px dotted #ccc;
     width: 100%;
     padding: 10px 0;
 }
 
 .contruct-stage > div > div > div:hover > h1{
     background: #534e5a;
     color:#fff;
 }
 .contruct-stage > div > div > div >h4{
     color:#333;
 }
 .contruct-stage > div > div > div > h1{
     display: block;
     width: 70px;
     height: 70px;
     padding: 5px;
     background:#efefef;
     color:#666;
     text-align:center;
     float: left;
     margin-right: 20px;
     margin-top: 0px;
     border-radius: 5px;
 }
 .contruct-stage > div > div > div > h1 >  span{
     display: block;
     font-size: 12pt;
 }
 
 
 .about-hrm{
     background: #6da756;
     padding: 50px 20px 50px;
     color:#fff;
 }
 
 .about-hrm  h1{
     font-weight: 600;
     font-size: 45pt;
     text-align: right;
     margin-top: -5px;
     opacity: .3;
 }
 .why-hrm{
     padding: 50px 0;
     background: #fff;
 }
 
 .why-hrm h2, 
 .hrm-feedback h2,
 .hrm-feature h2,
 .hrm-users h2{
    text-align: center;
 }
 
 
 .why-hrm h2:after, 
 .hrm-feedback h2:after,
 .hrm-feature h2:after,
 .hrm-users h2:after{
     display: block;
     width: 80px;
     height: 2px;
     background: #6da756;
     content: '';
     margin: 10px auto 30px;
 }
 
 .why-hrm > div > div > div{
    background: rgba(0,105,0,.05);
    padding: 30px 20px;
    min-height: 330px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.why-hrm > div > div >div > h5{
    font-weight: 600;
    color:#000;
}

.hrm-feedback{
    background: #f6fdf3;
    padding: 30px 20px;
}
.hrm-feedback > div > div {
    border-bottom: 1px dotted #ccc;
    padding: 20px 0;
}
.hrm-feedback > div > div > div > h4{
    font-size: 12pt;
    
}

.hrm-feature{
     padding: 30px 20px 50px;
     background-image: url('../img/stuffs_walking.jpg');
     background-size: cover;
     -moz-background-size: cover;
     -webkit-background-size: cover;
     background-position: top center;   
     
 }
 
 .hrm-feature > div > div > div{
     background: rgba(255,255,255,.9); 
     border-left: 2px solid #6da756;
     margin-bottom: 20px;
     min-height: 400px;
 }
 
 .hrm-feature > div > div > div > ul{
     padding: 10px 35px;
 }
 .hrm-feature > div > div > div > ul > li > span{
     font-weight: 600;
     color:#000;
 }
 .hrm-feature > div > div > div > h4{
     color:#fff;
     background: #6da756;
     padding: 10px 20px;
 }
 .hrm-feature p{
     text-align: center;
 }
 
 .hrm-users{
     background: #fff;
     padding: 20px 20px 50px;
 }
 
 .hrm-users > div > div > div{
     border:1px solid #eee;
     padding: 20px 20px;
     text-align: center;
     margin-bottom: 20px;
     min-height: 280px;
 }
 
 .hrm-users > div > div > div > h4{
     color:#000;
     
 }
 .hrm-users > div > div > div:hover > h4{
     color:#fff;
 }
 .hrm-users > div > div > div:hover{
     background: #6da756;
     color:#fff;
     outline: 1px solid #6da756;
     outline-offset: 10px;
     transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
 }
 
 .customers{
     background: #efefef;
     padding: 20px 20px 50px;
     
 }
 
 .customers h3{
     text-align: center;
     margin-bottom: 30px;
 }
 
 .customers > div > div > div{
     background: #fff;
     height: 200px;
     padding: 20px 20px;
     text-align: center;
     border-radius: 10px;
     margin-bottom: 20px;
 }

.customers > div > div > div:hover {
    margin-top: -10px;
    transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
}

 .customers > div > div > div > p{
     font-size: 9.3pt;
 }
 
 
 .quote{
     background: #efefef;
     padding: 100px 20px;
 }
 
  
 .quote-header{
    background: #333;
    color:#ccc;
    margin: 0 0 20px;
    float: left;
    width: 100%;
    padding: 50px 20px;
 }
 
 .quote-header>h2{
     color:#ccc; 
     text-align: center;
 }

 .cta{
     background: #204d74;
     text-align: center;
     padding: 60px 20px;
 }
 
 
 .video-viewer{
     padding: 50px 20px;
     background: #000;
     color:#999;
 }
 
 .video-viewer h3{
     color: #fff;
 }
 * .video-viewer h4{
     text-align: center;
     border-top:1px dotted #333;
     padding: 15px 20px;
     margin-top: 20px;
 }
 
 .playyer{
     width: 100%;
 }
    /* mobile screen----------------------------------------------*/
@media screen and (max-width: 480px){
    
body{
        padding: 0 0;
    }
    .logo{
        margin-left: -30px;
    }
    
.navbar-custom{ 
    background: #007dc5; 
}

.slider{
    width: 100%;
    height: 350px;
    background: #000;
    background-size: cover;
    background-position: center center;
}
    
.pageheader{
    width: 100%;
    height: 300px;
    background: #000;
    position: relative;
    background-size: cover;
    background-position: center center;
}

.banner-cta{
    color:#fff;
    font-family: 'Oxygen', sans-serif;
    width: 50%;
    margin-top: 50px;
    margin-left: 20px;
    z-index: 100;
    position: relative;
}

.banner-cta h1{    
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 19pt;
}

.thumb-narrow{
    display: block;
    height: 250px;
    background: #efefef;
    margin-bottom: 20px;
}




.about{
    min-height: 850px;
    padding-bottom: 20px;
}

.about-content{
    background: rgba(0,0,0,.8);
    padding: 50px;
    color:#fff;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
}


.moto{
    background: #fff;
    min-height: 300px;    
    color:#fff;
    
}

.moto > div > div{
    background: rgba(0,0,100,0.9); 
    padding: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
}

.video-bg{
    display: none;
}

 .NetEMC-How-does-it-work img{
     display:block;
     width: 100%;
     margin: 5px auto 20px;
 }

.about-emc > div > div > h1,  
.about-compassmate > div > div > h1{ 
     font-weight: 800;
     font-size: 60pt; 
     position: relative;
     opacity: 0.1; 
     margin: -5px 0 25px;
     line-height: 100%;
     
 }
 
}


.package-pricing{
    padding: 0px 20px 50px;
    background: #fff;
}

.package-pricing h2{
    text-align: center;
}

.package-pricing h2:after{
    display: block;
    content: '';
    width: 100px;
    height: 2px;
    background: #6da756;
    margin: 15px auto 25px;
}

.pricing-header{
    padding: 50px 20px;
    background: #ccc;
    margin-bottom: 20px;
    background-image: url("../img/pricing_bg-01.png");
    background-size: cover;
}

/*
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs*/
.tablinks{
    width: 100%;     
    border: 1px solid #b5e9a1;
    background: none;
    margin: 5px 0;
    text-align: left;
    border-radius: 0px;
}

.tablinks h3{
    font-weight: 600;
    color:#2d3e50;
    float:left;
    padding:0px 10px ;
}
.tablinks > p{
    padding: 10px 10px 5px;
    float: right;
    text-align: right;
}
.tablinks > p > span{
    font-weight: 600;
    color:#333;
    font-size: 11.6pt;
}
.tablinks-active {
    border: 1px solid #6da756;
    background:#f6fdf3;
    outline: none;
}
 
.hrm-features-for-quote{
    
}

.hrm-features-for-quote h4{
    color:#000;
}

.hrm-features-for-quote h5{
    color:#333;
    font-weight: 600;
}

.hrm-features-for-quote ul{
    padding: 0 0;
}

.hrm-features-for-quote ul li{ 
    list-style: none;
    color:#666;
    padding: 1px 0;
    
}

.hrm-features-for-quote ul li:before{
    display: block;
    content: '';
    width: 14px;
    height: 14px;
    background: #1CAF9A;
     background-image: url('../img/icon-check-01.svg');
     background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    float:left;
    margin: 3px 10px 0 0;
    border-radius: 50%;
}
.inactive-list{
    color:#ccc !important;
    font-style: italic;
}
.inactive-list:before{
    display: block;
    content: '';
    width: 14px;
    height: 14px;
    background: #ccc !important;
    background-image: url('../img/icon-check-inactive.svg')!important;
     background-size: cover !important;
    -moz-background-size: cover !important;
    -webkit-background-size: cover !important;
    float:left;
    margin: 3px 10px 0 0;
    border-radius: 50%;
}
/*Form*/

.hs-form .hs-form-field {
      
}

.hs-form-field { 
   font-family: 'Open Sans', sans-serif; 
}
.agenda{
 padding: 20px;   
}
/* Descriptions (targets class applied to Help Text divs) */
.hs-form .hs-field-desc {}

/* Labels (selects field labels and error messages) */
.hs-form label {
    font-weight: 400;
    display:block;
    margin:10px 0;
}

.hs-form input {
    width: 100%;
    height: 30px;
    border:none;
    border-bottom: 1px solid #ccc;
       padding: 3px 0px;
}
.hs-form .hs-form-field > label {}

/* Inputs (selectors for all inputs)  */
.hs-form input[type="text"],
.hs-form input[type="password"], 
.hs-form input[type="datetime"], 
.hs-form input[type="datetime-local"], 
.hs-form input[type="date"], 
.hs-form input[type="month"], 
.hs-form input[type="time"], 
.hs-form input[type="week"], 
.hs-form input[type="number"], 
.hs-form input[type="email"], 
.hs-form input[type="url"], 
.hs-form input[type="search"], 
.hs-form input[type="tel"], 
.hs-form input[type="color"],
.hs-form input[type="file"],

.hs-form select {
    color:#333;
    font-weight: 400;
    width: 100%;
  
}

.hs-form textarea{
    width: 100%;
    min-height: 200px;
}

/* Inputs in focus (selectors for all inputs when clicked)  */
.hs-form input[type="text"]:focus,
.hs-form input[type="password"]:focus, 
.hs-form input[type="datetime"]:focus, 
.hs-form input[type="datetime-local"]:focus, 
.hs-form input[type="date"]:focus, 
.hs-form input[type="month"]:focus, 
.hs-form input[type="time"]:focus, 
.hs-form input[type="week"]:focus, 
.hs-form input[type="number"]:focus, 
.hs-form input[type="email"]:focus, 
.hs-form input[type="url"]:focus, 
.hs-form input[type="search"]:focus, 
.hs-form input[type="tel"]:focus, 
.hs-form input[type="color"]:focus,
.hs-form input[type="file"]:focus,
.hs-form textarea:focus,
.hs-form select:focus {
    
}

/* Multi-line inputs (selectors to target multi-line fields */
.hs-form textarea {}
.hs-form textarea:focus {}

/* Dropdowns (selectors for dropdowns) */
.hs-form select {
    display:block;
    width:100%;
    height:40px;
    border:1px solid #ccc;
}
.hs-form select:focus {
    
}

/* Multi-select (selectors for multi-select fields) */
.hs-form form.hs-form .hs-form-field ul.inputs-list {}

.hs-form form.hs-form .hs-form-field ul.inputs-list li input {}
.hs-form input[type="radio"] {}
.hs-form input[type="checkbox"] {}

/* Required (selectors for fields, when they do not pass validation) */
.hs-form input:focus:required:invalid, 
.hs-form textarea:focus:required:invalid, 
.hs-form select:focus:required:invalid {}

.hs-form input:focus:required:invalid:focus, 
.hs-form textarea:focus:required:invalid:focus, 
.hs-form select:focus:required:invalid:focus {}

/* Error message (selector for validation messages) */
.hs-form .hs-error-msgs label{}

/* Placeholder Text (styles the placeholder attribute text) */
::-webkit-input-placeholder { /* Webkit Browsers */}
:-moz-placeholder { /* Firefox 18- */}
::-moz-placeholder { /* Firefox 19+ */}
:-ms-input-placeholder { /* IE10 */}

/* Multi Column Form (selectors for fieldsets and field wrappers) 
   ========================================================================== */

.hs-form .hs-form fieldset.form-columns-1 {}
.hs-form .hs-form fieldset.form-columns-1 .hs-form-field {}

.hs-form .hs-form fieldset.form-columns-2 {}
.hs-form .hs-form fieldset.form-columns-2 .hs-form-field {}

.hs-form .hs-form fieldset.form-columns-3 {}
.hs-form .hs-form fieldset.form-columns-3 .hs-form-field {}

body .hs-button.primary,
body input[type="submit"],
body input[type="button"] {
    display:block;
    background:rgba(0,102,179,1);
    color:#fff;
    margin:20px 0;
    padding: 5px 10px;
    height:40px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 2px solid #555;
}

body .hs-button.primary:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover {}

body .hs-button.primary:focus,
body input[type="submit"]:focus,
body input[type="button"]:focus {}

.hs-form .hs-form-field {
      
}

.hs-form-field { 
   font-family: 'Open Sans', sans-serif; 
}
.agenda{
 padding: 20px;   
}
/* Descriptions (targets class applied to Help Text divs) */
.hs-form .hs-field-desc {}

/* Labels (selects field labels and error messages) */
.hs-form label {
    font-weight: 400;
    display:block;
    margin:10px 0;
}

.hs-form input {
    width: 100%;
    height: 30px;
    border:none;
    border-bottom: 1px solid #ccc;
       padding: 3px 0px;
}
.hs-form .hs-form-field > label {}

/* Inputs (selectors for all inputs)  */
.hs-form input[type="text"],
.hs-form input[type="password"], 
.hs-form input[type="datetime"], 
.hs-form input[type="datetime-local"], 
.hs-form input[type="date"], 
.hs-form input[type="month"], 
.hs-form input[type="time"], 
.hs-form input[type="week"], 
.hs-form input[type="number"], 
.hs-form input[type="email"], 
.hs-form input[type="url"], 
.hs-form input[type="search"], 
.hs-form input[type="tel"], 
.hs-form input[type="color"],
.hs-form input[type="file"],
.hs-form textarea,
.hs-form select {
    color:#333;
    font-weight: 400;
  
}

/* Inputs in focus (selectors for all inputs when clicked)  */
.hs-form input[type="text"]:focus,
.hs-form input[type="password"]:focus, 
.hs-form input[type="datetime"]:focus, 
.hs-form input[type="datetime-local"]:focus, 
.hs-form input[type="date"]:focus, 
.hs-form input[type="month"]:focus, 
.hs-form input[type="time"]:focus, 
.hs-form input[type="week"]:focus, 
.hs-form input[type="number"]:focus, 
.hs-form input[type="email"]:focus, 
.hs-form input[type="url"]:focus, 
.hs-form input[type="search"]:focus, 
.hs-form input[type="tel"]:focus, 
.hs-form input[type="color"]:focus,
.hs-form input[type="file"]:focus,
.hs-form textarea:focus,
.hs-form select:focus {
    
}

/* Multi-line inputs (selectors to target multi-line fields */
.hs-form textarea {}
.hs-form textarea:focus {}

/* Dropdowns (selectors for dropdowns) */
.hs-form select {
    display:block;
    width:100%;
    height:40px;
    border:1px solid #ccc;
}
.hs-form select:focus {
    
}

/* Multi-select (selectors for multi-select fields) */
.hs-form form.hs-form .hs-form-field ul.inputs-list {}

.hs-form form.hs-form .hs-form-field ul.inputs-list li input {}
.hs-form input[type="radio"] {}
.hs-form input[type="checkbox"] {}

/* Required (selectors for fields, when they do not pass validation) */
.hs-form input:focus:required:invalid, 
.hs-form textarea:focus:required:invalid, 
.hs-form select:focus:required:invalid {}

.hs-form input:focus:required:invalid:focus, 
.hs-form textarea:focus:required:invalid:focus, 
.hs-form select:focus:required:invalid:focus {}

/* Error message (selector for validation messages) */
.hs-form .hs-error-msgs label{}

/* Placeholder Text (styles the placeholder attribute text) */
::-webkit-input-placeholder { /* Webkit Browsers */}
:-moz-placeholder { /* Firefox 18- */}
::-moz-placeholder { /* Firefox 19+ */}
:-ms-input-placeholder { /* IE10 */}

/* Multi Column Form (selectors for fieldsets and field wrappers) 
   ========================================================================== */

.hs-form .hs-form fieldset.form-columns-1 {}
.hs-form .hs-form fieldset.form-columns-1 .hs-form-field {}

.hs-form .hs-form fieldset.form-columns-2 {}
.hs-form .hs-form fieldset.form-columns-2 .hs-form-field {}

.hs-form .hs-form fieldset.form-columns-3 {}
.hs-form .hs-form fieldset.form-columns-3 .hs-form-field {}

body .hs-button.primary,
body input[type="submit"],
body input[type="button"] {
    display:block;
    background:rgba(0,102,179,1);
    color:#fff;
    margin:20px 0;
    padding: 5px 10px;
    height:40px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 2px solid #555;
}

body .hs-button.primary:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover {}

body .hs-button.primary:focus,
body input[type="submit"]:focus,
body input[type="button"]:focus {}