@import "https://use.fontawesome.com/releases/v5.0.13/css/all.css";
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css";

body {
    color: #03363d
}

h1 {
    line-height: 1.2em;
    font-size: 4em
}

span#search {
    color: #30aabc;
    font-style: italic
}

.footer-border {
    border-top: 1px solid #f3f0ee;
    margin-top: 30px;
    padding: 30px 10px
}

.rborder {
    border-right: 2px solid #b7deef
}

.fullimg img {
    width: 100%;
    height: auto
}

.navbar {
    min-height: 80px
}

.navbar-nav>li>a {
    line-height: 40px
}

#header .navbar {
    border: none;
    background-color: white
}

#header .navbar .navbar-nav>li:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease
}

#header .navbar .navbar-nav>li.active a,
#header .navbar .navbar-nav>li:hover>a:hover,
#header .navbar .navbar-nav>li>a:hover,
#header .navbar .navbar-nav>li:focus a {
    background-color: transparent
}

#header .navbar .navbar-nav>li.active:after,
#header .navbar .navbar-nav>li:hover:after,
#header .navbar .navbar-nav>li:focus:after {
    width: 100%;
    background: #8b8b8b
}

.fixed-top {
    margin-top: 50px;
    transition: .1s ease
}

.js-tilt {
    border: 10px solid #f3f0ee;
    padding: 10px
}

.js-tilt img {
    transform-style: preserve-3d;
    transform: translateZ(20px)
}

section.hellobar {
    background-color: #f9ffdf;
    font-size: 16px;
    text-align: center
}

.hellobar a {
    color: #fff;
    text-decoration: none
}

.hellobar a:hover {
    text-decoration: underline
}

.hellobar-wrap {
    position: relative;
    margin: 0 auto;
    width: 100%
}

.hellobar-content {
    overflow: hidden;
    padding: 15px 0;
    transition: .1s ease
}

.hellobar-toggle {
    position: absolute;
    top: 10px;
    right: 15px;
    bottom: 0;
    z-index: 1;
    min-width: 9px;
    min-height: 17px;
    opacity: 0;
    cursor: pointer
}

.hellobar-close {
    position: absolute;
    top: 10px;
    right: 15px
}

.hellobar-close:hover {
    cursor: pointer
}

h1 {
    margin-bottom: 40px
}

.main-top {
    padding-top: 100px
}

.main-top p {
    margin-top: 20px
}

span.phone {
    font-size: 2em;
    color: #148ee1
}

a.btn {
    margin-right: 10px;
    border-radius: 0
}

a.btn-primary {
    background-color: #148ee1
}

a.btn-default {
    border-color: #148ee1
}

ul.list-group li:hover {
    background-color: #f3f0ee
}

section.services {
    background-color: #f3f0ee;
    margin: 40px auto;
    padding: 30px 0;
    text-align: center
}

section.services h2 {
    margin-bottom: 30px
}

section.services .row {
    margin-top: 40px
}

section.services h3 {
    margin-bottom: 20px;
    margin-top: 0
}

section.services div.col-md-4 {
    text-align: left
}

.legal {
    background: url('/styles/legal-bg.jpg');
    background-size: cover;
    text-align: center;
    color: #fff;
    margin-bottom: 50px
}

.legal .container .main-top {
    padding-bottom: 50px
}

.gradient {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(at 300px 300px, rgba(159, 0, 191, 0.9) 0, #4D4FA7 70%)
}

.contact {
    background: url('/styles/local.jpg');
    background-size: cover;
    text-align: center;
    color: #f9ffdf;
    margin-bottom: 50px;
    min-height: 450px;
    background-position: center center
}

.contact .container .main-top {
    padding-bottom: 50px
}

.contact h1 {
    color: white;
    margin-top: 50px
}

iframe {
    width: 100%;
    height: 500px
}

.titles {
    text-align: center;
    padding-top: 150px;
    padding-bottom: 100px;
    margin-bottom: 50px
}

.titles h1 {
    margin: auto;
    max-width: 600px
}

.col-center {
    text-align: center
}

.whole .container .row {
    margin: 50px auto
}

.titles.product {
    height: 600px;
    background-color: #f79a3e
}

.titles.product h5 {
    text-align: left;
    margin-top: 40px
}

.titles.product h1 {
    text-align: left;
    margin-left: 0
}

.card-deck {
    margin-top: 30px
}

.titles.service {
    height: 600px;
    background-color: #f4f4f4
}

.titles.service h5 {
    text-align: right;
    margin-top: 40px
}

.titles.service h1 {
    text-align: right;
    margin-left: 0
}

#footer a {
    color: #777
}

#footer .footer-border a {
    color: #148ee1
}

form.research {
    margin-bottom: 10px
}

@media (min-width:992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 1.6em;
        padding-right: 1.6em
    }
}

@media (max-width:760px) {

    .titles h1,
    .contact h1 {
        font-size: 3em
    }

    section.hellobar {
        display: none
    }

    nav.navbar {
        margin-top: 0
    }

    a#customBezier img {
        width: 200px
    }

    h1,
    h2,
    .titles.service h1,
    .titles.product h1,
    .titles.service h5,
    .titles.product h5 {
        text-align: center
    }

    .main-top .row .col-md-6,
    .well {
        text-align: center
    }

    section.services div.col-md-4 {
        text-align: center
    }

    .col-md-6 img {
        width: 100%
    }

    .well img {
        margin: auto
    }

    .titles.product,
    .titles.service {
        height: auto
    }

    .titles.product img,
    .titles.service img {
        display: none
    }

    #footer div.col-md-3,
    div.col-md-6 {
        text-align: center;
        padding-top: 30px
    }

    .footer-border {
        text-align: center
    }
}

#header {
    margin-top: 0
}

#footer {
    margin-top: 30px;
    background-color: #fafafa;
    padding-top: 30px;
    color: #999999
}

#footer h3 {
    color: #555555;
    text-transform: uppercase
}

.gallery-image img {
    display: block;
    max-width: 100%;
    height: auto
}

a#customBezier img {
    margin-left: -250px
}