html {
    scroll-behavior: smooth;
  }
  body{
    background: linear-gradient(#051835, #2E85E9 15%,#051835 70%);
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
}
{
    color: white;

}

h1, h2, h3, h4{
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}
.header h1{
    font-size: 3.1em;
}
h2{
    font-size:2.7rem;
}
.navbar-toggler{
    position: absolute;
    top: 10px;
    right: 10vw;
}

.divider{
    height: 1px;
    width: 70%;
    margin: auto;
    background-color: rgba(255,255,255);
}
#nav{
  margin-right: auto;
  margin-left:  auto;
  max-width: 80%;

    background: #051835;
}
#nav a{
    color:white;
    font-size: 16px;
    padding:10px 30px;
    text-decoration: unset; /* removes style for underline */
}
#nav li{
    width:25%;
   
}
.navbar{
    padding: 0;
    border-color: white;
    box-shadow: none;
}
.navbar-dark .navbar-toggler-icon{
    background-image: url('/images/bars-solid.svg')!important;
}
.customer_support{
    float:right; 
    font-size: 18px;
    padding:10px 2px;
    text-transform: uppercase;
}
.customer_support:hover{
   text-decoration: underline;
}
#sticky{
    position: -webkit-sticky; /* Safari */  
    position: sticky;
    bottom: 10px;
    display: inline-block;
    float: right;
    margin-right: 20px;
}
#sticky {
   text-shadow: 3px 6px 10px #272634;
}
.sticky-wrapper{
    
}

#wrapper {
  margin-right: auto; 
  margin-left:  auto; 
  max-width: 80%;
  background-color: #051835;
}

.logo{
    margin: 0 0 10vh 122px;
    width:200px; /* provides the auto scaling for all screen sizes */
    max-width: 80vw;
}

.header_logo {
    width: 100%;
}

.header{
    /*padding: 0 20px 10vh 20px;*/
}
.header h2{
    padding: 0 10px;
}

.header p{
    font-size: 1.4em;
    font-weight: 100;
    padding: 40px 20vw;
}
.header a:hover{
    color:white;
}

.case-study {
    font-size: 1.4em;
    font-weight: 100;
    background-color: #0F3158;
}
.case-study-logo-p {
    display: flex;
    justify-content: center;
    align-items: center;
}

.case-study-logo {
    width: 100%;
    height: 100%;
}

.case-study-ul {
    list-style-type: none
}
#case-study p{
    padding: 0 10vw;
}
.to-top-icon{
    margin-left: 20px;
}

.call-to-action {
    background-color:#c9cade;
}

.call-to-action-text {
    background-color:#c9cade;
    font-size:20px;
    color:black;
    margin:30px;
}

.features{
    padding:10px
    margin-bottom: 50px;
}

.features{
    background-color: #0F3158;
}
.features p{
    color: white;
    font-size: 1.3em;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
}
.features h4{
    color: white;
    white-space: nowrap;
    font-size: 2em;
    font-weight: 300;
}

.img_container{

}

.feature_image{
    width:auto;
    max-height: 200px;
    padding: 30px;
}

#careers {
    padding: 75px 10vw 0 10vw;
}

#about_us{
    padding: 180px  0 10vw;
}
#about_us h1{
    font-weight:300;
}
#about_us p{  
    font-size: 1.4em;
    font-weight: 100;
    margin: 0;
    padding: 0 10vw;
}
#projects{
    padding: 100px 0 10vw;
}
#projects .col-s-12{
    padding: 0;
}
#projects .project-img{
    height: 200px;
    background-size: cover;
    position: relative;
    margin: 20px;
}
#projects .overlay{
    background-color: transparent;
}
#projects .overlay{
    position: absolute;
    background-color: rgba(0,0,0,.4);
}
#projects .project-img p{
    position: relative;
    font-size: 20px;
    bottom: -80%;
    transition: transform 0.3s ease-out;
}
.project-img:hover p{
  transform: scale(1.2);
}
.project-img:hover .overlay{
      background-color: rgba(0,0,0,.7) !important;
}
#harber{
    background-image: url(images/corn.png);
}
#wfs{
    background-image: url(images/sink.png);
}
#avvid{
    background-image: url(images/chip.png);   
}
#border-app{
    background-image: url(images/bridge.png);  
    cursor: pointer;
}
#cpg{
    background-image: url(images/computer.png); 
}
#lds{
    background-image: url(images/cars2.png);
}

.tech-logo{
    width:100%;
}

.tech .card{
    margin: 100px 0 10vw;

}
.partners img, .technologies img{
   height: 100px;
    width: auto;
    margin: 50px
}
.tech h2{
    color:#1C3993;
    padding-top: 20px;
    font-size: 2.4em
}


.overlay{
    position: absolute;
    background-color: rgba(0,0,0,.65);
    width: 100%;
    height: 100%;
}

.blog-post{
    position: relative;
}
.blog-img{
    right:10px;
    width: 100%;
    height: 250px;
    background: url(images/bridge.png) center center no-repeat;
}
#blog{
    padding: 5vh 10vw;
}
.blog-content{
    padding: 30px 30px 50px 0;
    margin-bottom: 150px;
}
.blog-image-large{
    width: 100%;
    height: 400px;
    background-size: cover;
}

.blog-title{
    font-weight: 100;
    font-size: 2rem;
}
.blog-subtitle{
    font-size: 1.2rem;
    font-weight: 100;
    padding-bottom: 20px
}
#blog-sidebar{
/*    border-left: 1px solid rgba(255,255,255,0.2);*/
    background-color: rgba(0,0,0,0.1);
    padding: 20px;
}

.next-blog-preview{
    margin-top: 270px;
}

.sidebar-categories{
    border: 2px solid #0F3158;
    background-color: #1A4A84;
}
#blog-sidebar .divider{
    margin: 20px 0;
    width: 100%;
}
#blog-post-large h2{
    font-size: 3.5em
}
.sidebar-categories div.text-center{
    background-color: #0F3158;
    padding: 10px;
}
.sidebar-categories .col-6 p{
    padding: 3px 8px;
    font-weight: 100;
}
.sidebar-categories .col-6 p:hover{
    color: #0F3158;
}
.related-blog-posts{
    margin-top: 40px;
}
.blog-content p{
    font-weight: 100;
}
.blog-content p:nth-child(1){
    padding-top: 5vh;
}
.blog-content img{
    width: 100%;
}
#slideshow{
    padding-top: 25px;
    margin-bottom: 75px;
}
#slideshow h2{
    padding: 0 0 20px 30px;
}
#myCarousel, #slideshow .carousel-item{
   height:50vw;
}

#contact{
    /*margin-top: 7%;*/
    margin:325px 0 10vw;
}
.contact-info-container{
    padding-left: 10vw;
    padding-bottom: 20px;

}
#contact h2{
   padding-bottom: 10px;
}
#contact .h3{
    padding-top: 20px;
    display: flex;
    justify-content: flex-start;
}
#contact .h3 i{
    margin-right:10px;
    padding:0;
}
#contact p{
    margin: 0;
    padding-left: 17px;
    font-size: 20px;
}

.map-container{
   padding: 30px;
}

a{
    color: white;
    text-decoration: underline;
}
.a-opposite {
    color: black;
    text-decoration: underline;
}

a:hover{
    color:#1C3993;
}
#form{
    margin-top: 150px;
}
#form h2{
    color:#1C3993;
    padding-top: 50px;
    padding-left: 10vw;
}
#form h3{
    color:#4C6977;
    padding: 20px 0 0 10vw;
}
#form form{
    width:50%;
    padding-left: 10vw;;
    padding-bottom: 50px;
}

footer{
    margin-top: 100px;
}
.footer-text{
    position:relative;
    top:4px;
    padding-left: 5px;
}

.main-carousel-container{

}
.carousel-inner{
    height:100%;
}
#myCarousel{
    margin-top: 30px;
    padding: 0 50px;
    height: 700px;
    position: relative;    
}
.carousel-item-container{
    width: 100%;
    height:100%;
}
.carousel-item{
    width:100%;
}
#myCarousel p, #myCarousel h2, #myCarousel h3{
    color:white;
}
.carousel-item-container p{
    font-size: 1.3em
}
.carousel-control-prev, .carousel-control-next{
    width:30px;
}
#myCarousel h2 {
    font-size: 2.2em;
}
.border-app-img{
    width:100%;
    height: auto;
}
.border-app h2{
    padding-right: 0 !important;
}
.border-app h3{
    padding-bottom: 0px;
    font-size: 1.6em;
}
.border-app p{
    padding-right: 10vw;
}
.border-app a{
    text-decoration: underline;
}
.border-app a:hover{
    text-decoration: none;
    color: white;
}
.oms img{
   
}

.oms a{
    text-decoration: underline;
}
.oms h3{
    font-size: 2.2em;
    padding-bottom: 20px;
}

.avvid img{
    width:100%;
}
.avvid div{

}
.avvid .tagline{
    font-size: 26px;
    position:relative;
    bottom:50px
}
.lds img {
    width:100%;
}
.lds .text-container{
    padding: 5% 10% 0 3%;
}

.cpg img{
    /*padding-top: 30px;
    width:100%;
    position: relative;*/
   
}
.cpg{
    /*position:relative;*/
}
.gopack-mobile{
    position:absolute;
    bottom:30%;
    left:60%;
    width:35% !important;
    height: auto;
}
.gopack-mobile2{
    width:35% !important;
    height: auto;
}
.new-wave {
    padding-bottom: 20px;
}
.new-wave .screenshot{
    height:15%;
    padding-top: 20px;
    margin: auto;
}

/*PRIVACY*/
#privacy{
    padding:3vw;
}
#privacy h2{
    font-size:2.6em;
    padding-bottom: 30px
}
#privacy .text-wrapper{
    font-size: 120%;
    padding: 20px;
}

.gopack-logo {
    display:none !important;
}

.oms-phones img{
    width:100%;
}


.oms-logo {
    display:none !important;
}

.wfs-logo {
    display:none !important;
}

.borderapp-logo {
    display:none !important;
}
.avvid-logo {
    display:none !important;
}

.technology-logos {
    padding: 20% 0 ;
}

 .row:nth-child(1) .technology-logos{
    border:1px solid tomato;
}
/*Media Query for mobile devices and small browser windows*/
@media only screen and (max-width : 600px) {
    .navbar-toggler{
    position: absolute;
    top: 10px;
    right: 0;
    }
    body {
        font-size: .8em;
    }

    .logo{
        padding:5vh 10px 150px 10px;
        width:100%;
    }
    #nav li{
    }
    #nav a{
        color:white;
    }

    #about_us{
        padding: 50px 0;
    }
    #about_us p{
        margin: 0;
        padding: 0;
        
    }
    #technology-image{
        background-image: url(images/tech_mobile.jpg);
        background-attachment: scroll;
        background-size: cover;
        margin: 0 0 30px 0;
        height: 90vh;
        position: relative;
    }
    #technology-image .content-container{
        padding: 60px 10vw;
    }
    #technology-image h2{
        font-size: 2.5em;
        padding-bottom: 20px;
    }
    #technology-image h3{
        font-size: 1.7em;
    }
    .partners .card .row{
        padding: 0;
    }
    .contact-info-container{
        margin-top:25px;
    padding-left: 0;

    }
   #contact .h3, #contact h2, #contact p{
        display: flex;
        justify-content: center;
    }
     .contact-info-container i{
        display: inline;
    }


    .tech .card{
        margin-left: 0;
        margin-right: 0;
    }
    #slideshow{
        padding-top: 0px;
        margin-bottom: 75px;
    }
    #myCarousel{
        padding:0;
    }
    .carousel-inner{
        font-size: 85%;
    }
    .border-app *{
        /*font-size: 115%;*/
    }
    .border-app p{
        padding:0;
    }
    .border-app-img{
        display:none;
        visibility: hidden;
    }

    .oms-phones img{
        display:none;
        visibility: hidden;
    }
    .avvid img{
        width:100%;
    }

    .oms-logo {
        width:25% !important;
        display:unset !important;
    }

    .gopack-logo {
        width:25% !important;
        display:unset !important;
    }

    .avvid-logo {
        width:45% !important;
        display:unset !important;
    }

    .borderapp-logo {
        width:35% !important;
        display:unset !important;
    }

    .wfs-logo {
        width:50% !important;
        display:unset !important;
    }

    .nwl-logo {
        width:50% !important;
    }


}


@media only screen and (max-width : 900px) {
    .logo{
        margin:auto;
        width: 100vw;
        padding: 0 0 10px 10px;
    }

    .border-app {
        /*font-size: .85em;*/
        padding: 0;
    }
    .border-app p{
        padding:0;
    }
    .border-app-img{
        display:none;
        visibility: hidden;
    }
}


#alert {
    width: 65%;
    background-color: #6b8ebb !important;
    border-color: white;
    border-style: solid;
    margin: auto;
    font-size: 11px;
    padding: 5px;
    border-width: 2px;
}