Difference between revisions of "Team:Oxford/Assets/Style.css"

 
(21 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{:Team:Oxford/Templates/Nav}}
+
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
−
<html>
+
    display:none;
 +
}
 +
#top-section {
 +
    border: none;
 +
    height: 0px;
 +
}
  
−
        <div class="title container-fluid">
+
#content {
−
            <div class="row">
+
    width:100%;
−
                <div class="col-md-12">
+
}
−
                    <img src="https://static.igem.org/mediawiki/2015/2/2a/Ox_solution_jumbo.png"/>
+
−
                </div>
+
  
−
            </div>
+
body {
−
        </div>
+
    position: relative;
−
        <div class="container-fluid content-container">
+
}
−
            <div class="row">
+
 
−
                <div class="col-md-12">
+
.row {
−
                    <div id="project-byline">
+
    background-color: #fff;
−
                        <h3>A targeted approach to antimicrobial resistance</h3>
+
}
−
                    </div>
+
.navbar {
−
                </div>
+
    margin-top: 16px;
−
            </div>
+
    position: fixed;
−
            <div class="row" id="get">
+
    font-size: 13px;
−
                <div class="col-md-4">
+
    background-color: #fff;
−
                    <h3>Guidance</h3>
+
    margin-bottom: 0;
−
                    <p>
+
}
−
                        Strengthening research and working towards a coordinated response
+
 
−
                    </p>
+
.navbar-right li {
−
                </div>
+
    font-family: "Avenir",sans-serif;
−
                <div class="col-md-4">
+
    color: #cccccc;
−
                    <h3>Education</h3>
+
}
−
                    <p>
+
 
−
                        Improving awareness and understanding of antimicrobial resistance
+
.navbar-nav > li > a {
−
                    </p>
+
    padding-left: 5px;
−
                </div>
+
    padding-right: 5px;
−
                <div class="col-md-4">
+
}
−
                    <h3>Tools</h3>
+
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover {
−
                    <p>
+
    background-color: #fff;
−
                        Changing the way we think about treatment
+
    color:#4776E6;
−
                    </p>
+
}
−
                </div>
+
 
−
            </div>
+
.navbar-default .navbar-nav > .active {
−
            <div class="row" id="davis-quote">
+
    background-color: #fff;
−
                <div class="col-md-8 col-md-offset-1">
+
 
−
                    <h3><i class="fa fa-quote-left"></i> Antimicrobial resistance poses a catastrophic threat. If we don't act now, any one of us could go into hospital in 20 years for minor surgery and die because of an ordinary infection that can't be treated by antibiotics. <i class="fa fa-quote-right"></i></h3>
+
}
−
                </div>
+
 
−
            </div>
+
.navbar-brand {
−
            <div class="row">
+
    font-weight: bold;
−
                <div class="col-md-6 col-md-offset-6">
+
    color: #4776E6;
−
                    <div class="quote-name-box">
+
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
−
                        <h3 id="sally">Professor Dame Sally Davies</h3><p>Chief Medical Officer, March 2013</p>
+
    -webkit-background-clip: text;
−
                    </div>
+
    -webkit-text-fill-color: transparent;
−
                    </p>
+
}
−
                </div>
+
 
−
            </div>
+
 
−
         </div>
+
#main-container {
−
         <!-- main-container stays open, will be closed in the footer-->
+
    top:0;
−
</html>
+
    left:0;
−
{{:Team:Oxford/Templates/Footer}}
+
    right:0;
 +
    margin:51.3px 0 0 0;
 +
    padding:0;
 +
    background-color:#fff;
 +
    overflow:scroll;
 +
    position:absolute;
 +
}
 +
 
 +
#sidebar.affix {
 +
    top: 80px;
 +
}
 +
 
 +
.contents-sidebar {
 +
    padding-left: 20px;
 +
    margin-top: 20px;
 +
    margin-bottom: 20px;
 +
    background-color: white;
 +
}
 +
 
 +
.contents-sidebar .nav>li>a {
 +
    color: #999;
 +
    padding: 4px 20px;
 +
    font-size: 0.9em;
 +
    font-weight: 400;
 +
}
 +
 
 +
.contents-sidebar .nav .nav>li>a {
 +
    padding-top: 1px;
 +
    padding-bottom: 1px;
 +
    padding-left: 20px;
 +
    font-size: 0.8em;
 +
}
 +
 
 +
.contents-sidebar .nav>.active>a {
 +
    color: #4776E6;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;
 +
}
 +
 
 +
.contents-sidebar .nav>li>a {
 +
    border-left: 2px solid transparent;
 +
}
 +
.contents-sidebar .nav>.active>a,
 +
.contents-sidebar .nav>li>a:hover,
 +
.contents-sidebar .nav>li>a:focus {
 +
    color: #4776E6;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;
 +
    text-decoration: none;
 +
    background-color: transparent;
 +
    border-left: 2px solid #4776E6;
 +
    font-weight: 700;
 +
}
 +
 
 +
.contents-sidebar .nav .nav>.active>a,
 +
.contents-sidebar .nav .nav>li>a:hover,
 +
.contents-sidebar .nav .nav>li>a:focus {
 +
    font-weight: 500;
 +
}
 +
 
 +
.contents-sidebar .nav ul.nav {
 +
    display: none;
 +
}
 +
 
 +
.contents-sidebar .nav>.active>ul.nav {
 +
    display: block;
 +
}
 +
 
 +
#sidebar {
 +
    background-color: white;
 +
}
 +
 
 +
#title {
 +
    width: 100%;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
 +
    background:    -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
 +
    background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
 +
    background:        linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */
 +
    border-radius: 0;
 +
    margin-top: -10px;
 +
}
 +
 
 +
#title div {
 +
    width: 100%;
 +
}
 +
 
 +
#solution {
 +
    padding-top: 4em;
 +
    padding-bottom: 4em;
 +
}
 +
 
 +
#solution-byline {
 +
    margin: auto;
 +
}
 +
 
 +
#solution-byline h3 {
 +
    vertical-align: bottom;
 +
}
 +
 
 +
#title img {
 +
    width:80%;
 +
    display: block;
 +
    margin: auto auto;
 +
    max-width: 800px;
 +
}
 +
 
 +
#title p {
 +
    margin: 0;
 +
}
 +
 
 +
#logo img {
 +
    margin:auto;
 +
    width: 6em;
 +
}
 +
 
 +
#title h3 {
 +
    color: #fff;
 +
    text-align: center;
 +
    font-family: "Avenir", sans-serif;
 +
    font-weight: lighter;
 +
    font-size: 1em;
 +
    margin-bottom: 1em;
 +
    margin-right: auto;
 +
    margin-left: auto;
 +
}
 +
 
 +
#title a {
 +
    color: #fff;
 +
    padding: 0.2em;
 +
    border: 3px solid white;
 +
}
 +
 
 +
#title a:hover {
 +
    background-color: white;
 +
    color: #8E54E9;
 +
    text-decoration: none;
 +
}
 +
 
 +
.page-content {
 +
    background-color: #fff;
 +
    z-index: 10;
 +
}
 +
 
 +
.quote {
 +
    font-family: "Avenir", sans-serif;
 +
    color: #4776E6;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;
 +
    margin: 1em;
 +
}
 +
 
 +
.quote-right, .quote-left {
 +
    max-width: 350px;
 +
}
 +
 
 +
.quote p {
 +
    text-align: justify;
 +
    text-transform: uppercase;
 +
    font-size: 1em;
 +
    font-weight: lighter;
 +
    margin-bottom: 0;
 +
}
 +
 
 +
.quote h3 {
 +
    text-align: right;
 +
    font-size: 1em;
 +
    text-transform: uppercase;
 +
    margin-top: 0;
 +
}
 +
 
 +
.quote-full {
 +
    width: 85%;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    clear: both;
 +
    padding: 15px 0;
 +
    max-width: 810px;
 +
}
 +
 
 +
.quote-right {
 +
    width: 50%;
 +
    font-size: 1em;
 +
    float: right;
 +
    padding-left: 15px;
 +
    padding-right: 0;
 +
}
 +
 
 +
.quote-left {
 +
    width:50%;
 +
    font-size: 1em;
 +
    float: left;
 +
    padding-right: 15px;
 +
    padding-left: 0;
 +
}
 +
 
 +
#foot {
 +
    background-color: #4776E6;
 +
    color: white;
 +
    font-family: "Avenir",sans-serif;
 +
    text-align: center;
 +
    padding-top: 1em;
 +
    z-index: -10;
 +
    text-transform: uppercase;
 +
    vertical-align: middle;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
 +
    background:    -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
 +
    background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
 +
    background:        linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */
 +
}
 +
 
 +
h2 {
 +
    font-size: 3em;
 +
    font-family: "Avenir", sans-serif;
 +
    text-transform: uppercase;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;
 +
    border: none;
 +
    clear: both;
 +
    margin-bottom: 0em;
 +
}
 +
 
 +
 
 +
 
 +
p {
 +
    text-align: justify;
 +
    font-family: "Avenir", sans-serif;
 +
}
 +
 
 +
 
 +
h3 {
 +
    clear: both;
 +
    font-weight: lighter;
 +
    font-family: "Avenir", sans-serif;
 +
    color: #777;
 +
    text-transform: uppercase;
 +
    font-size: 1.5em;
 +
}
 +
 
 +
h2, h3 {
 +
    padding-top: 80px;
 +
    margin-top: -50px;
 +
}
 +
 
 +
ol {
 +
    list-style-type: none;
 +
    padding-top: 15px;
 +
    margin-top: 30px;
 +
    margin-bottom: 30px;
 +
    border-top: 1px solid #cccccc;
 +
    border-bottom: 1px solid #cccccc;
 +
    padding-left: 15px;
 +
}
 +
 
 +
ol li {
 +
    counter-increment: step-counter;
 +
    margin-bottom: 20px;
 +
    font-family: "Avenir", sans-serif;
 +
    vertical-align: middle;
 +
    color: #777;
 +
}
 +
 
 +
ol li::before {
 +
    content: counter(step-counter);
 +
    font-size: 1.5em;
 +
    font-family: "Avenir",sans-serif;
 +
    font-weight: lighter;
 +
    margin-right: 15px;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;
 +
    float: left;
 +
}
 +
 
 +
ol li p{
 +
    overflow: hidden;
 +
}
 +
 
 +
.slim {
 +
    max-width: 720px;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    padding-left: 15px;
 +
    padding-right: 15px;
 +
}
 +
 
 +
.section {
 +
    clear: both;
 +
}
 +
 
 +
.section h2 {
 +
    margin-bottom: 0;
 +
}
 +
 
 +
.image-full img {
 +
    margin-left: -15px;
 +
    margin-right: -15px;
 +
    width: 100%;
 +
}
 +
 
 +
.image p {
 +
    text-align: center;
 +
    font-weight: lighter;
 +
    font-family: "Avenir",sans-serif;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
.image-right {
 +
    width: 40%;
 +
    float: right;
 +
    padding-left: 15px;
 +
    padding-right: 0;
 +
    margin-right:0;
 +
}
 +
 
 +
.image-right img {
 +
    width: 100%;
 +
}
 +
 
 +
.image-left {
 +
    width:40%;
 +
    float: left;
 +
    padding-right: 15px;
 +
    padding-left: 0;
 +
    margin-left: 0;
 +
}
 +
 
 +
.image-left img {
 +
    width: 100%;
 +
}
 +
 
 +
#foot {
 +
    margin-top: -10px;
 +
}
 +
 
 +
#foot ul {
 +
    list-style-type: none;
 +
    list-style-image: none;
 +
    margin-left: 0;
 +
}
 +
 
 +
#foot li {
 +
    display: inline;
 +
    text-align: center;
 +
}
 +
 
 +
#foot a {
 +
    color: white;
 +
    font-size: 1em;
 +
    padding-right: 0px;
 +
}
 +
 
 +
#foot a[href ^="https://"] {
 +
    padding-right: 5px;
 +
    padding-left: 5px;
 +
}
 +
 
 +
#foot p {
 +
    font-size: 0.5em;
 +
    text-align: center;
 +
}
 +
 
 +
 
 +
.page-heading {
 +
    width: 100%;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
 +
    background:    -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
 +
    background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
 +
    background:        linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */
 +
    text-align: center;
 +
    margin-top: -10px;
 +
}
 +
 
 +
.page-heading h3 {
 +
    color: white;
 +
    font-size: 10vw;
 +
    font-weight: bolder;
 +
    font-family: "Avenir",sans-serif;
 +
    margin: 0;
 +
    padding-top: 50px;
 +
    padding-bottom: 50px;
 +
}
 +
 
 +
.page-heading h3::before {
 +
    content: "[";
 +
    font-size: 15vw;
 +
}
 +
 
 +
.page-heading h3::after {
 +
    content: "]";
 +
    font-size: 15vw;
 +
}
 +
 
 +
.team-member {
 +
    border-bottom: 1px solid #cccccc;
 +
    margin-bottom: 15px;
 +
    text-align: center;
 +
    margin-top: 5px;
 +
}
 +
 
 +
.team-member img {
 +
    width:100%;
 +
    max-width: 250px;
 +
    margin-left: auto;
 +
    margin-right:auto;
 +
    display: block;
 +
 
 +
}
 +
 
 +
.team-member h2{
 +
    font-size: 1.5em;
 +
    margin-bottom: 0;
 +
}
 +
 
 +
 
 +
#bodyContent .team-member h2 , #bodyContent .advisor:nth-child(1) {
 +
    margin-bottom: 0;
 +
    padding-bottom: 0;
 +
}
 +
 
 +
 
 +
#bodyContent .advisor h2 {
 +
    margin-top: 0;
 +
    padding-top: 0;
 +
}
 +
 
 +
.team-member h3 {
 +
    font-size: 1em;
 +
    margin-top: 0;
 +
    padding-top: 5px;
 +
}
 +
 
 +
#bodyContent h2 {
 +
    margin-bottom: 0;
 +
}
 +
 
 +
#support {
 +
    text-align: center;
 +
}
 +
 
 +
.sponsor-logo img{
 +
    width: 100%;
 +
    max-width: 200px;
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    border-bottom: 1px solid #cccccc;
 +
    padding: 0;
 +
}
 +
 
 +
.sponsor-logo img:hover{
 +
    border-bottom: 1px solid #4776E6;
 +
}
 +
 
 +
.section-spacer {
 +
    width: 100vw;
 +
    margin-left: -15px;
 +
    margin-right: -15px;
 +
    display: block;
 +
    height: 75px;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
 +
    background:    -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
 +
    background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
 +
    background:         linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */
 +
    margin-top: 30px;
 +
    display: none;
 +
}
 +
 
 +
#references {
 +
    border-top: 1px solid #cccccc;
 +
    font-size: 0.8em;
 +
}
 +
 
 +
.references {
 +
    padding-left: 0px;
 +
    border: none;
 +
    margin-top: 15px;
 +
}
 +
 
 +
@media (max-width: 768px) {
 +
    .quote-left, .quote-right {
 +
        width: 85%;
 +
         margin-left: auto;
 +
        margin-right: auto;
 +
        clear: both;
 +
        padding: 15px 0;
 +
        float: none;
 +
        border: none;
 +
    }
 +
    .image-left, .image-right {
 +
        margin-left: -15px;
 +
        margin-right: -15px;
 +
        width: 100%;
 +
        width: calc(100% + 30px);
 +
        float:none;
 +
    }
 +
 
 +
    h2 {
 +
        font-size: 2em;
 +
    }
 +
}
 +
 
 +
@media (max-width: 992px) {
 +
    .contents-sidebar {
 +
        display: none;
 +
    }
 +
}
 +
 
 +
@media (min-width: 1225px) {
 +
    .quote-full {
 +
        width: 920px;
 +
        max-width:none;
 +
        margin-left: -100px;
 +
        margin-right: -100px;
 +
    }
 +
 
 +
    .image-left, .quote-left {
 +
        width: 33vw;
 +
        margin-left: -100px;
 +
    }
 +
    .image-right, .quote-right {
 +
        width: 33vw;
 +
        margin-right: -100px;
 +
    }
 +
    .image.image-right.lightbox, .image.image-left.lightbox {
 +
        margin: 0;
 +
    }
 +
}
 +
 
 +
@media (min-width: 1500px) {
 +
    .image-left, .quote-left {
 +
        margin-left: -200px;
 +
    }
 +
    .image-right, .quote-right {
 +
        margin-right: -200px;
 +
    }
 +
    .image.image-right.lightbox, .image.image-left.lightbox {
 +
        margin: 0;
 +
    }
 +
}
 +
 
 +
.algorithm>ol {
 +
    border: none;
 +
    padding-top: 15px;
 +
    margin-top: 10px;
 +
    margin-bottom: 15px;
 +
}
 +
 
 +
.algorithm>h3 {
 +
    text-align: center;
 +
    padding-top: 0px;
 +
    margin-top: 15px;
 +
}
 +
 
 +
.algorithm {
 +
    border-top: 1px solid #cccccc;
 +
    border-bottom: 1px solid #cccccc;
 +
    margin-top: 30px;
 +
    margin-bottom: 30px;
 +
}
 +
 
 +
.image.lightbox {
 +
    position: fixed;
 +
    top: 66px;
 +
    bottom: 0px;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    background: #000;
 +
    background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
 +
    background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
 +
    background:    -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
 +
    background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
 +
    background:        linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */
 +
    z-index: 10000000;
 +
    float: none;
 +
}
 +
 
 +
.image.lightbox>img {
 +
    width: auto;
 +
    max-height: 60%;
 +
    max-width: 90%;
 +
    opacity: 1;
 +
    margin: auto;
 +
    display: block;
 +
    margin-top: 15px;
 +
}

Latest revision as of 08:14, 12 August 2015

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;

}

  1. top-section {
   border: none;
   height: 0px;

}

  1. content {
   width:100%;

}

body { 

   position: relative;

}

.row { 

   background-color: #fff;

} .navbar { 

   margin-top: 16px;
   position: fixed;
   font-size: 13px;
   background-color: #fff;
   margin-bottom: 0;

}

.navbar-right li { 

   font-family: "Avenir",sans-serif;
   color: #cccccc;

}

.navbar-nav > li > a { 

   padding-left: 5px;
   padding-right: 5px;

} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover { 

   background-color: #fff;
   color:#4776E6;

}

.navbar-default .navbar-nav > .active { 

   background-color: #fff;

}

.navbar-brand { 

   font-weight: bold;
   color: #4776E6;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

}


  1. main-container {
   top:0;
   left:0;
   right:0;
   margin:51.3px 0 0 0;
   padding:0;
   background-color:#fff;
   overflow:scroll;
   position:absolute;

}

  1. sidebar.affix {
   top: 80px;

}

.contents-sidebar { 

   padding-left: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
   background-color: white;

}

.contents-sidebar .nav>li>a { 

   color: #999;
   padding: 4px 20px;
   font-size: 0.9em;
   font-weight: 400;

}

.contents-sidebar .nav .nav>li>a { 

   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 20px;
   font-size: 0.8em;

}

.contents-sidebar .nav>.active>a { 

   color: #4776E6;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

}

.contents-sidebar .nav>li>a { 

   border-left: 2px solid transparent;

} .contents-sidebar .nav>.active>a, .contents-sidebar .nav>li>a:hover, .contents-sidebar .nav>li>a:focus { 

   color: #4776E6;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-decoration: none;
   background-color: transparent;
   border-left: 2px solid #4776E6;
   font-weight: 700;

}

.contents-sidebar .nav .nav>.active>a, .contents-sidebar .nav .nav>li>a:hover, .contents-sidebar .nav .nav>li>a:focus { 

   font-weight: 500;

}

.contents-sidebar .nav ul.nav { 

   display: none;

}

.contents-sidebar .nav>.active>ul.nav { 

   display: block;

}

  1. sidebar {
   background-color: white;

}

  1. title {
   width: 100%;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
   background:     -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
   background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
   background:         linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */
   border-radius: 0;
   margin-top: -10px;

}

  1. title div {
   width: 100%;

}

  1. solution {
   padding-top: 4em;
   padding-bottom: 4em;

}

  1. solution-byline {
   margin: auto;

}

  1. solution-byline h3 {
   vertical-align: bottom;

}

  1. title img {
   width:80%;
   display: block;
   margin: auto auto;
   max-width: 800px;

}

  1. title p {
   margin: 0;

}

  1. logo img {
   margin:auto;
   width: 6em;

}

  1. title h3 {
   color: #fff;
   text-align: center;
   font-family: "Avenir", sans-serif;
   font-weight: lighter;
   font-size: 1em;
   margin-bottom: 1em;
   margin-right: auto;
   margin-left: auto;

}

  1. title a {
   color: #fff;
   padding: 0.2em;
   border: 3px solid white;

}

  1. title a:hover {
   background-color: white;
   color: #8E54E9;
   text-decoration: none;

}

.page-content { 

   background-color: #fff;
   z-index: 10;

}

.quote { 

   font-family: "Avenir", sans-serif;
   color: #4776E6;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin: 1em;

}

.quote-right, .quote-left { 

   max-width: 350px;

}

.quote p { 

   text-align: justify;
   text-transform: uppercase;
   font-size: 1em;
   font-weight: lighter;
   margin-bottom: 0;

}

.quote h3 { 

   text-align: right;
   font-size: 1em;
   text-transform: uppercase;
   margin-top: 0;

}

.quote-full { 

   width: 85%;
   margin-left: auto;
   margin-right: auto;
   clear: both;
   padding: 15px 0;
   max-width: 810px;

}

.quote-right { 

   width: 50%;
   font-size: 1em;
   float: right;
   padding-left: 15px;
   padding-right: 0;

}

.quote-left { 

   width:50%;
   font-size: 1em;
   float: left;
   padding-right: 15px;
   padding-left: 0;

}

  1. foot {
   background-color: #4776E6;
   color: white;
   font-family: "Avenir",sans-serif;
   text-align: center;
   padding-top: 1em;
   z-index: -10;
   text-transform: uppercase;
   vertical-align: middle;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
   background:     -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
   background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
   background:         linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */

}

h2 { 

   font-size: 3em;
   font-family: "Avenir", sans-serif;
   text-transform: uppercase;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   border: none;
   clear: both;
   margin-bottom: 0em;

}


p { 

   text-align: justify;
   font-family: "Avenir", sans-serif;

}


h3 { 

   clear: both;
   font-weight: lighter;
   font-family: "Avenir", sans-serif;
   color: #777;
   text-transform: uppercase;
   font-size: 1.5em;

}

h2, h3 { 

   padding-top: 80px;
   margin-top: -50px;

}

ol { 

   list-style-type: none;
   padding-top: 15px;
   margin-top: 30px;
   margin-bottom: 30px;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   padding-left: 15px;

}

ol li { 

   counter-increment: step-counter;
   margin-bottom: 20px;
   font-family: "Avenir", sans-serif;
   vertical-align: middle;
   color: #777;

}

ol li::before { 

   content: counter(step-counter);
   font-size: 1.5em;
   font-family: "Avenir",sans-serif;
   font-weight: lighter;
   margin-right: 15px;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   float: left;

}

ol li p{ 

   overflow: hidden;

}

.slim { 

   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 15px;
   padding-right: 15px;

}

.section { 

   clear: both;

}

.section h2 { 

   margin-bottom: 0;

}

.image-full img { 

   margin-left: -15px;
   margin-right: -15px;
   width: 100%;

}

.image p { 

   text-align: center;
   font-weight: lighter;
   font-family: "Avenir",sans-serif;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-transform: uppercase;

}

.image-right { 

   width: 40%;
   float: right;
   padding-left: 15px;
   padding-right: 0;
   margin-right:0;

}

.image-right img { 

   width: 100%;

}

.image-left { 

   width:40%;
   float: left;
   padding-right: 15px;
   padding-left: 0;
   margin-left: 0;

}

.image-left img { 

   width: 100%;

}

  1. foot {
   margin-top: -10px;

}

  1. foot ul {
   list-style-type: none;
   list-style-image: none;
   margin-left: 0;

}

  1. foot li {
   display: inline;
   text-align: center;

}

  1. foot a {
   color: white;
   font-size: 1em;
   padding-right: 0px;

}

  1. foot a[href ^="https://"] {
   padding-right: 5px;
   padding-left: 5px;

}

  1. foot p {
   font-size: 0.5em;
   text-align: center;

}


.page-heading { 

   width: 100%;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
   background:     -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
   background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
   background:         linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */
   text-align: center;
   margin-top: -10px;

}

.page-heading h3 { 

   color: white;
   font-size: 10vw;
   font-weight: bolder;
   font-family: "Avenir",sans-serif;
   margin: 0;
   padding-top: 50px;
   padding-bottom: 50px;

}

.page-heading h3::before { 

   content: "[";
   font-size: 15vw;

}

.page-heading h3::after { 

   content: "]";
   font-size: 15vw;

}

.team-member { 

   border-bottom: 1px solid #cccccc;
   margin-bottom: 15px;
   text-align: center;
   margin-top: 5px;

}

.team-member img { 

   width:100%;
   max-width: 250px;
   margin-left: auto;
   margin-right:auto;
   display: block;

}

.team-member h2{ 

   font-size: 1.5em;
   margin-bottom: 0;

}


  1. bodyContent .team-member h2 , #bodyContent .advisor:nth-child(1) {
   margin-bottom: 0;
   padding-bottom: 0;

}


  1. bodyContent .advisor h2 {
   margin-top: 0;
   padding-top: 0;

}

.team-member h3 { 

   font-size: 1em;
   margin-top: 0;
   padding-top: 5px;

}

  1. bodyContent h2 {
   margin-bottom: 0;

}

  1. support {
   text-align: center;

}

.sponsor-logo img{ 

   width: 100%;
   max-width: 200px;
   display: block;
   margin-left: auto;
   margin-right: auto;
   border-bottom: 1px solid #cccccc;
   padding: 0;

}

.sponsor-logo img:hover{ 

   border-bottom: 1px solid #4776E6;

}

.section-spacer { 

   width: 100vw;
   margin-left: -15px;
   margin-right: -15px;
   display: block;
   height: 75px;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
   background:     -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
   background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
   background:         linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */
   margin-top: 30px;
   display: none;

}

  1. references {
   border-top: 1px solid #cccccc;
   font-size: 0.8em;

}

.references { 

   padding-left: 0px;
   border: none;
   margin-top: 15px;

}

@media (max-width: 768px) { 

   .quote-left, .quote-right {
       width: 85%;
       margin-left: auto;
       margin-right: auto;
       clear: both;
       padding: 15px 0;
       float: none;
       border: none;
   }
   .image-left, .image-right {
       margin-left: -15px;
       margin-right: -15px;
       width: 100%;
       width: calc(100% + 30px);
       float:none;
   }

   h2 {
       font-size: 2em;
   }

}

@media (max-width: 992px) { 

   .contents-sidebar {
       display: none;
   }

}

@media (min-width: 1225px) { 

   .quote-full {
       width: 920px;
       max-width:none;
       margin-left: -100px;
       margin-right: -100px;
   }

   .image-left, .quote-left {
       width: 33vw;
       margin-left: -100px;
   }
   .image-right, .quote-right {
       width: 33vw;
       margin-right: -100px;
   }
   .image.image-right.lightbox, .image.image-left.lightbox {
       margin: 0;
   }

}

@media (min-width: 1500px) { 

   .image-left, .quote-left {
       margin-left: -200px;
   }
   .image-right, .quote-right {
       margin-right: -200px;
   }
   .image.image-right.lightbox, .image.image-left.lightbox {
       margin: 0;
   }

}

.algorithm>ol { 

   border: none;
   padding-top: 15px;
   margin-top: 10px;
   margin-bottom: 15px;

}

.algorithm>h3 { 

   text-align: center;
   padding-top: 0px;
   margin-top: 15px;

}

.algorithm { 

   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   margin-top: 30px;
   margin-bottom: 30px;

}

.image.lightbox { 

   position: fixed;
   top: 66px;
   bottom: 0px;
   left: 0;
   width: 100%;
   height: 100%;
   background: #000;
   background: -webkit-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Chrome 10+, Saf5.1+ */
   background:    -moz-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* FF3.6+ */
   background:     -ms-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* IE10 */
   background:      -o-linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* Opera 11.10+ */
   background:         linear-gradient(90deg, #4776E6 10%, #8E54E9 90%); /* W3C */
   z-index: 10000000;
   float: none;

}

.image.lightbox>img { 

   width: auto;
   max-height: 60%;
   max-width: 90%;
   opacity: 1;
   margin: auto;
   display: block;
   margin-top: 15px;

}