/* ----------------------------------------------------------------------------- */
/* Navbar
-------------------------------------------------------------------------------- */
/* ---------- common Nav Styles ---------- */
iframe.skiptranslate { visibility: hidden ! important; }
.navbar-default {
    background: #fff;
    border-bottom-color: #fff;

    box-shadow: 0 1px 1px rgba(66,81,92,0.12),
    0 2px 2px rgba(66,81,92,0.12),
    0 4px 4px rgba(66,81,92,0.12),
    0 8px 8px rgba(66,81,92,0.12),
    0 16px 16px rgba(66,81,92,0.12);
    font-size: 14px;
    font-weight:600;
    z-index: 1000;
}

.navbar-default .navbar-nav>li>a {
    /*background: #fff;*/
    font-family: 'Work Sans', sans-serif !important;
    color: #42515c;
    border-top: 0 solid #009eb6;
    transition: all .3s ease;
    width:100%;
}

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: 100%;
}

.navbar-default .navbar-nav>li.current-menu-item a:hover {
    background: #f4f7f8;
}
.navbar-brand {
    margin:0 auto;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    padding:7px;
}
.navbar-brand img{
    max-height:35px;
    width:auto;
}

.navbar-toggle {
    border: none;
    border-radius: 0;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #009eb6;
}
.navbar-default .navbar-nav > li.trial,
.navbar-default .navbar-nav > li.demo,
.navbar-default .navbar-nav > li.login-vert{
    background-color:transparent !important;
}

.navbar-default .navbar-nav > li.trial > a,
.navbar-default .navbar-nav > li.demo > a,
.navbar-default .navbar-nav > li.login-vert a{
    text-transform: uppercase;
    border-top: none;
    /*color: #42515c;
    /*background-color:white;*/
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus{
    background: #f4f7f8;
    color: #009eb6;
    border-right: 4px solid #009eb6;
}
.navbar-default .navbar-nav>.open>a{
    background: #fff;
    color: #009eb6;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav > li.trial > a:hover,
.navbar-default .navbar-nav > li.demo > a:hover,
.navbar-default .navbar-nav > li.login-vert a:hover
.navbar-default .navbar-nav > li.trial > a:focus,
.navbar-default .navbar-nav > li.demo > a:focus,
.navbar-default .navbar-nav > li.login-vert a:focus{
    color:#009eb6;
    background: #f4f7f8;
}
.navbar-default .navbar-nav > ul, .navbar-default .navbar-nav > li{
    display: flex;
    flex-direction: column;
    text-align: center;
    width:100%;
    clear:both;
    padding-left:15px;
    padding-right:15px;
}
.navbar-nav > li{text-transform:uppercase;}
.btn-tile a:hover{background-color: #15b3bf;}

/* Dropdown */
.dropdown-toggle .nav-link:hover .dropdown-menu{display:block;}
.navbar-default .navbar-collapse{border-color:#42515c;}
.navbar-default .navbar-form{border-color:transparent; border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;}
.dropdown-menu {
    background: #fff;
    border: none;
    font-size: 15px;
}

.navbar-default .navbar-nav > li .dropdown-menu>li>a {
    line-height: 25px;
    text-transform: none;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>.current-menu-item a{
    background: #009eb6;
    color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a{background:transparent; color:#009eb6;}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{background:transparent; color:#009eb6;}
.navbar-right .dropdown-menu {
    left: 0;
}
.navbar-right .dropdown-menu a {
    color: #fff;
}
.login-space{
    display:flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-around;
}
#login-container{
    display:inline-block !important;
    margin-left:5px;
}
.header-menu li a, .header-menu li a:visited, .header-menu li a:focus, .header-menu li a:active {
    font-family: 'Work Sans', sans-serif !important;
    font-weight:600;
    font-size: 14px;
    color: #42515c;
    outline: 0;
    text-decoration: none;
    transition: background-color .6s ease;
}
.header-menu li.open>a, .header-menu li.open>a:hover, .header-menu li.open>a:focus{background-color: white;}
.header-menu li a:hover {
    color: #009eb6;
    text-decoration: none;
    background-color:transparent;
}

/* ---------- Desktop & tablet ---------- */
@media (min-width: 768px) {
    .navbar {
        width:100px;
        height: 100%;
        top:70px!important;
    }
    .navbar-brand {
        float: none;
    }
    .login-header-top{
        padding:0 0 0 20px;
        display:flex;
    }

    .navbar-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        height:70px;
    }
    .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    .navbar-default .navbar-nav > li.login-vert{display:none;}
    .navbar-header{width:100px;}
    .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
        max-height: 100%;
        height: 100vh !important;
    }
    .navbar .navbar-default .navbar-fixed-top{top:100px !important;}
    .home-menu a::before{
        content: url(../images/menu_home.png);
        display:block;
    }
    .solution-menu a::before{
        content: url(../images/menu_solutions.png);
        display:block;
    }
    .products-menu a::before{
        content: url(../images/menu_products.png);
        display:block;
    }
    .services-menu a::before{
        content: url(../images/menu_services.png);
        display:block;
    }
    .resources-menu a::before{
        content: url(../images/menu_resources.png);
        display:block;
    }
    .search-menu a::before{
        content: url(../images/menu_search.png);
        display:block;
    }
    .nav > li > a {
        position: relative;
        display: block;
        padding: 0 3px;
    }
    .navbar-default .navbar-nav > ul, .navbar-default .navbar-nav > li{
        text-align: center;
    }
    ul.nav li.dropdown:hover ul.dropdown-menu {display: block;}
    .navbar-default .navbar-nav > li.trial > a, .navbar-default .navbar-nav > li.demo > a{background-color: #f0f4f5;}
    .navbar-default .navbar-nav > li.trial, .navbar-default .navbar-nav > li.demo{background-color: white !important;}
    .navbar-default .navbar-nav > li {
        display:table;
        padding: 0.5vh 0;
    }

    .navbar-default .navbar-nav > li > a {
        max-width: 100px;
        vertical-align: middle;
        display:table-cell;
        padding:1vh 0;
    }
    .navbar-default .navbar-nav>li>a:hover {
        border-right: 4px solid #009eb6;
        transition: all .3s ease;
        width:100%;
    }
    .navbar-default .navbar-nav>li>a:focus,
    .navbar-default .navbar-nav>li>a:active,
    .navbar-default .navbar-nav>li>a:hover{
        background: #f4f7f8;
        color: #009eb6;
        border-right: 4px solid #009eb6;
        transition: all .3s ease;
        width:100%;
    }
    .navbar-default .navbar-nav > li.trial a, .navbar-default .navbar-nav > li.demo a{
        padding: 20px 10px;
        /*color:#42515c;*/
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
    }
    .navbar-default .navbar-nav > li.trial a:hover{
        color: #ff7f1b;
        border-top-color:#ff7f1b;
        border-bottom-color: #ff7f1b;
    }
    .navbar-default .navbar-nav > li.demo a:hover {
        color: #0069ac;
        border-top-color:#0069ac;
        border-bottom-color: #0069ac;
    }


    .dropdown-menu {
        top: 4px;
        left: 100%;
        padding:0;
        transition:0.4s;
    }
    .dropdown-menu:before{
        content:"";
        height:0;
        width:0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-right:15px solid #009eb6;
        position:absolute;
        top:2em;
        left:-15px;
        margin:0;
        z-index:100;
    }
    .navbar-left {
        float: none;
        display: flex !important;
        flex-direction: column;
        align-content: center;
        align-items: center;
        width:100%;
    }
    .header-menu-icons{
        height: 85vh;
        max-height: 100%;
    }
    .navbar-left:before {
        display:none;
    }
    .navbar-left:after {
        display:none;
    }
    .navbar-default .navbar-nav > li .dropdown-menu > li > a:before{
        display:none;
    }
    li.menu-item a{
        width:100%;
    }
    .btn-tile a{
        background-color: #009eb6;
        color:white;
        vertical-align: middle;
        display:table-cell;
        width: 100px;
        height: 70px;
        align-content: center;
        text-align: center;
    }
    .btn-tile a img{width:30px; height:auto;}

    .logo-trisotech{position:absolute; left: 50%; margin-left:-44px;}
    .caret {
        
        display: none;
        width: 0;
        height: 0;
        margin-left: -1px;
        vertical-align: middle;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left:4px solid #42515c;    }
    /* search bar*/
    .search-container{
        z-index:1031;
        position: fixed;
        top:10px;
        right:0;
        display:flex;
        flex-direction: row;
        align-content: flex-end;
        align-items: center;
        vertical-align: middle;
        justify-content: space-between;
    }
    .search-image{
        background-image: url(../images/menu_search.png);
        background-position: center center;
        background-repeat: no-repeat;
        width: 50px;
        height: 50px;
    }
    .custom-search {
        padding-left:8px;
        display:block;
    }
    .navbar-form{margin-top:0; margin-bottom:0;}
    .navbar-default .navbar-form{display:block;}
    input.search-field {
        display: block;
        width:150px;
        background-color: white;
        color:#42515c;
        border: 1px solid #7A8E9B;
        cursor: pointer;
        margin: 0;
        padding: 15px 40px;
        position: relative;
        -webkit-transition: width 400ms ease,background 400ms ease;
        transition: width 400ms ease,background 400ms ease;
        height: 40px;
        font-weight: 400;
        top: 5px;
        border-radius: 40px !important;
    }

    input.search-field:focus {
        background-color: #fff;
        border-bottom: 2px solid #009eb6;
        cursor: text;
        outline: 0;
        width: 260px;
        box-shadow: 0 1px 1px rgba(66,81,92,0.12),
                    0 2px 2px rgba(66,81,92,0.12),
                    0 4px 4px rgba(66,81,92,0.12),
                    0 8px 8px rgba(66,81,92,0.12),
                    0 16px 16px rgba(66,81,92,0.12);
    }
    input.search-submit {
      display: none;
    }
    input[type="search"] {
      -webkit-appearance: textfield;
    }
    .search-highlight {
        color: #009eb6;
        background: rgba(0, 158, 182, 0.05);
    }

}
/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    /* new */
    .navbar {
        width:100%;
    }
    .navbar-brand {
        padding-top:10px;
    }
    .navbar-top{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 50px;
        margin-right: 70px;
    }
    .login-header-top{display:none;}
    .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    .container-fluid>.navbar-collapse{
        margin-right: -15px;
        margin-left: -15px;
    }
    .navbar-collapse.in{overflow-y: visible;}
    .navbar-header{width:100%;}
    .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
        max-height: 100%;
    }
    nav .navbar .navbar-default .navbar-fixed-top.mobile-offset{top:50px !important;}
    /* // new */
    .navbar-default .navbar-nav .open .dropdown-menu{
        border-top: 1px solid #009eb6;
        border-bottom: 1px solid #009eb6;
    }
    ul .dropdown-menu{
        -webkit-transition: 400ms ease;
        transition: 400ms ease;
        padding:0;
    }
    ul:hover .dropdown-menu{
        -webkit-transition: 400ms ease;
        transition: 400ms ease;
        padding:0;
    }

    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        padding: 5px 15px;
        color: #42515c;

    }
    .navbar-default .navbar-nav > ul, .navbar-default .navbar-nav > li{
        text-align: left;
        width:100%;
    }
    .navbar-header {
        float: none;
    }
    .navbar-left, .navbar-right {
        float: none !important;
    }
    .navbar-toggle {
       display: block;
       margin-right: 0;
    }

    .navbar-fixed-top {
		border-width: 0 0 1px;
        border-width:0;
        position: fixed;
    }
    .navbar-top .navbar-fixed-top{ position:fixed; top:0 !important;}
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav {
        float: none !important;
		margin: 0 -15px;
    }
    .navbar-nav {display:flex;
        flex-direction: column;
        justify-content: space-between;}
	.navbar-nav>li {
       float: none;

    }
    .navbar-nav>li>a {
        padding:4px 15px;
    }
    .collapse.in{
  		display:block !important;
    }
    .navbar-nav{
        -webkit-transition: 400ms ease;
        transition:         400ms ease;}
    .navbar-nav .open{
        -webkit-transition: 400ms ease;
        transition:         400ms ease;}
    .navbar-nav .open .dropdown-menu {
        /*position: absolute;*/
        left:0;
        width: 100%;
        background-color: #fff;
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
        box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    }
    .btn-tile{position:absolute;left:0;}
    .btn-tile a{
        background-color: #009eb6;
        color:white;
        vertical-align: middle;
        display:table-cell;
        padding:0 7px;
        height: 50px;
        align-content: center;
        text-align: center;
        width:50px;
    }
    .btn-tile a img{width:30px; height:auto;}

    .logo-trisotech{position:absolute; left: 50%; margin-left:-44px;}
    .logo-trisotech a img{height:25px; width:auto;}
    /* search bar*/
    .search-container{
        z-index:1031;
        position: fixed;
        bottom:0;
        width:100%;
        border-top:1px solid #7A8E9B;
        background-color: white;
        background: rgba(255, 255, 255, 0.8) /* Green background with 30% opacity */
    }
    .custom-search {
        margin-left:auto;
        margin-right:auto;
        width:60%;
        padding-top:10px;
        padding-bottom:20px;
    }
    .navbar-form{margin-top:0; margin-bottom:0; padding-top:0;padding-bottom:0;}
    label {
        margin-bottom: 0;
        width:100%
    }
    input.search-field {
        border: 1px solid #7A8E9B;
        cursor: pointer;
        margin: 0;
        padding: 15px;
        position: relative;
        -webkit-transition: width 400ms ease,background 400ms ease;
        transition: width 400ms ease,background 400ms ease;
        height: 40px;
        font-weight: 400;
        border-radius: 40px !important;
        text-align: center;
        width:100%;
    }
    input.search-submit {
      display: none;
    }
    input[type="search"] {
      -webkit-appearance: textfield;
    }
    .search-highlight {
        color: #009eb6;
        background: rgba(0, 158, 182, 0.05);
    }
}