body {
  padding-top: 50px;
}

.main {
  padding: 40px 15px;
}


/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*----------------------------------------------------------------------------------------*\
    Object Link Fix
    Objects inside links prevent the link from functioning, this hack fixes that.
    `pointer-event: none;` would solve it but support is not good enough.
\*----------------------------------------------------------------------------------------*/
.obj-link {
    position: relative;
    display: block; 
}

/*
    1. This is needed for IE9+ or hover effects don't work over images embedded in the SVG.
*/
.obj-link:after {
    content: ""; 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0); /* 1 */
}        
/*----------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------*\
    SVG Polyfill
    Set base SVG to fill it's container.
\*----------------------------------------------------------------------------------------*/
.svg-box {
    line-height: 0;
    position: relative;
    display: block;
    overflow: hidden;
}

.svg-box--inline .svg {
    float: left;
    width: auto;
    /*max-height: 50px; example - set this on another class, don't pollute the pattern */
}

.svg {
    height: auto;
    width: 100%;
}

.svg-alt {
    line-height: 1;
    display: block;
    text-align: center;
    width: 100%;
    padding: 1em;
}

.svg-alt[data-alt]:before {
    content: attr(data-alt);
}

/* IE8- hacks */
@media \0screen\,screen\9 {
    .svg-alt {
        display: none;
    }
}

/* Control the size of the container (fixed height, proportional width, but shrinkable): */
/*
    The desired effect for this sub-pattern is to limit the height and max-width of the container
    and let the SVG proportionally fill that height forcing the width of the container (up to the 
    max-width), but so many devices and browsers place an arbitrary width to the container (meaning
    they're all the same width, no relative to SVG that it seems to make the most sense to 
    deliberately set the width, but allow those (minority) browsers that render the effect correctly
    to do so by targeting them specifically.
    This also overcomes the Opera Mini collapse problem (because it can't be targeted by CSS).
*/

.svg-fix-height {
    line-height: 0;
    /*max-width: 400px; example - set this on another class, don't pollute the pattern */
}

.svg-fix-height .svg-box {
    display: inline-block;
    max-width: 100%;
    text-align: center;
}

/* Sizing controls for SVG */
.svg-fix-height .svg {
    max-width: 100%;
    /* height: 100px; example - set this on another class, don't pollute the pattern */  
}

/* Chrome 29+ Opera 16+ */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .svg-fix-height .svg-box {
        width: auto !important;
    }
}

/* firefox 3.6+ */
@media screen and (-moz-images-in-menus:0) {
    .svg-fix-height .svg-box {
        width: auto !important;
    }
}

.svg-fix-height .svg-box {
    (;width: auto !important;); 
}

/*------------------------------------------------------------------------------------------------*/     

.navbar-brand {
    padding: 5px;
    display: table;
}

.navbar-brand .svg,
.navbar-brand .logo-title {
    height: 40px;
    display: table-cell;
}

.navbar-brand .svg {
    width: 40px;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-nav > li > a:hover {
    text-decoration: none;
    background-color: #666;
}



.logo-title {
    color: #FFFFFF;
    font-size: 1.125em;
    vertical-align: middle;
    padding-left: 0.5em;
    line-height: 1;
}

.nav > li > a.navbar-logo {
    padding: 5px;
    line-height: 0;
}

.nav > li > a.navbar-logo .svg {
    height: 40px;
    width: auto;
}

.nav > li > a.npeu {
    width: 167px;
}

.nav > li > a.ou {
    width: 137px;
}

@media (max-width: 768px) {
    .nav > li > a {
        width: 100% !important;
    }
}



@media (min-width: 768px) {
    .width-25 {
        width: 25%;
    }

    .width-33 {
        width: 33.33%;
    }

    .width-50 {
        width: 50%;
    }

    .width-66 {
        width: 66.66%;
    }

    .width-75 {
        width: 75%;
    }

    .width-100 {
        width: 100%;
    }
}


.list-table {
    display: block;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

    .list-table li {
        display: block;
        margin-bottom: 2em;
        text-align: center;
    }
    

.trials-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

    .trials-list li {
        display: inline-block;
        margin: 1em;
    }
    
@media (min-width: 993px) {
    .list-table {
        display: table;
        table-layout: fixed;
    }

        .list-table li {
            display: table-cell;
            margin-bottom: 0;
            width: auto;
        }

}

@media (max-width: 769px) {
    .trials-list img {
        height: auto;
        max-width: 100%;
        max-height: 100px;
    }
}

/*
@media (min-width: 993px) {
    .trials-list li + li {
        border-left: 1px solid #999;
    }
}
*/