/**********************************
Responsive navbar-brand image CSS
- Remove navbar-brand padding for firefox bug workaround
- add 100% height and width auto ... similar to how bootstrap img-responsive class works
***********************************/

.navbar-brand {
    padding: 0px;
}

    .navbar-brand > img {
        height: 100%;
        padding: 15px;
        width: auto;
    }







/*************************
EXAMPLES 2-7 BELOW 
**************************/

/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */

.example2 .navbar-brand > img {
    padding: 7px 15px;
}


/* EXAMPLE 3

line height is 20px by default so add 30px top and bottom to equal the new .navbar-brand 80px height  */

.example3 .navbar-brand {
    height: 80px;
}

.example3 .nav > li > a {
    padding-top: 30px;
    padding-bottom: 30px;
}

.example3 .navbar-toggle {
    padding: 10px;
    margin: 25px 15px 25px 0;
}






/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    height: 50px;
}

.navbar-alignit .navbar-brand {
    top: 50%;
    display: block;
    position: relative;
    height: auto;
    transform: translate(0,-50%);
    margin-right: 15px;
    margin-left: 15px;
}





.navbar-nav > li > .dropdown-menu {
    z-index: 9999;
}

body {
    font-family: "Lato";
}


#header h1,
#header h2 {
    z-index: 2;
    position: relative;
}

#header {
    position: relative;
    /*background-image: -webkit-linear-gradient(left, #53c1fc 0%, #1aa3ed 110%);
    background-image: -moz-linear-gradient(left,    #53c1fc 0%, #1aa3ed 110%);
    background-image: -o-linear-gradient(left,      #53c1fc 0%, #1aa3ed 110%);
    background-image: linear-gradient(to right,     #53c1fc 0%, #1aa3ed 110%);*/
}

#header:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 300px;
    opacity: 0.25;
    background-image: url('{{my.Content - LP_Image}}'); /* Insert Marketo token here */
    background-image: url('banner.jpeg');
    background-repeat: no-repeat;
    background-position-y: -410px;
}

.logo-title {
    font-size:38px;
    line-height: 38px;
    padding-top: 15px;
    display: inline-block;
}