Team:BOKU-Vienna

   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">

   <title>D.I.V.E.R.T.</title>

   <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:BOKU-Vienna/bootstrap.css?action=raw&ctype=text/css" />

   <style>
   /*!
    * Start Bootstrap - Grayscale v3.3.7+1 (http://startbootstrap.com/template-overviews/grayscale)
    * Copyright 2013-2016 Start Bootstrap
    * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
    */
   .bodyclass {
     width: 100%;
     height: 100%;
     font-family: Tahoma, Geneva, sans-serif;
     color: white;
     background-color: black;
   }
   html {
     width: 100%;
     height: 100%;
   }
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
     margin: 0 0 35px;
     text-transform: uppercase;
     font-family: Tahoma, Geneva, sans-serif;
     font-weight: 700;
     letter-spacing: 1px;
   }
   p {
     margin: 0 0 25px;
     font-size: 18px;
     line-height: 1.5;
   }
   @media (min-width: 768px) {
     p {
       margin: 0 0 35px;
       font-size: 20px;
       line-height: 1.6;
     }
   }
   a {
     color: #42DCA3;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
   }
   a:hover,
   a:focus {
     text-decoration: none;
     color: #1d9b6c;
   }
   .light {
     font-weight: 400;
   }
   .navbar-custom {
     margin-bottom: 0;
     border-bottom: 0px solid rgba(255, 255, 255, 0.3);
     text-transform: uppercase;
     font-family: Tahoma, Geneva, sans-serif;
     background-color: black;
   }
   .navbar-custom .navbar-toggle {
     color: white;
     background-color: rgba(255, 255, 255, 0.2);
     font-size: 12px;
   }
   .navbar-custom .navbar-toggle:focus,
   .navbar-custom .navbar-toggle:active {
     outline: none;
   }
   .navbar-custom .navbar-brand {
     font-weight: 700;
   }
   .navbar-custom .navbar-brand img {
     height: 40px;
   }
   .navbar-custom .navbar-brand:focus {
     outline: none;
   }
   .navbar-custom a {
     color: black;
   }
   .navbar-custom .nav li a {
     -webkit-transition: background 0.3s ease-in-out;
     -moz-transition: background 0.3s ease-in-out;
     transition: background 0.3s ease-in-out;
   }
   .navbar-custom .nav li a:hover {
     color: rgba(255, 255, 255, 0.8);
     outline: none;
     background-color: transparent;
   }
   .navbar-custom .nav li a:focus,
   .navbar-custom .nav li a:active {
     outline: none;
     background-color: transparent;
   }
   .navbar-custom .nav li.active {
     outline: none;
   }
   .navbar-custom .nav li.active a {
     background-color: rgba(255, 255, 255, 0.3);
   }
   .navbar-custom .nav li.active a:hover {
     color: white;
   }
   @media (min-width: 768px) {
     .navbar-custom {
       padding: 20px 0;
       border-bottom: none;
       letter-spacing: 1px;
       background: transparent;
       -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
       -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
       transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
     }
     .navbar-custom.top-nav-collapse {
       padding: 0;
       background: black;
       border-bottom: 0px solid rgba(255, 255, 255, 0.3);
     }
   }
   .intro {
     display: table;
     width: 100%;
     height: auto;
     padding: 100px 0;
     text-align: center;
     color: black;
     background: url(plastic.jpg) no-repeat bottom center scroll;
     background-color: black;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
   }
   .intro .intro-body {
     display: table-cell;
     vertical-align: middle;
   }
   .intro .intro-body .brand-heading {
     font-size: 40px;
   }
   .intro .intro-body .intro-text {
     font-size: 18px;
     font-family: Tahoma, Geneva, sans-serif;
   }
   @media (min-width: 768px) {
     .intro {
       height: 100%;
       padding: 0;
     }
     .intro .intro-body .brand-heading {
       font-size: 100px;
     }
     .intro .intro-body .intro-text {
       font-size: 26px;
     }
   }
   .btn-circle {
     width: 70px;
     height: 70px;
     margin-top: 15px;
     padding: 7px 16px;
     border: 2px solid black;
     border-radius: 100% !important;
     font-size: 40px;
     color: black;
     background: transparent;
     -webkit-transition: background 0.3s ease-in-out;
     -moz-transition: background 0.3s ease-in-out;
     transition: background 0.3s ease-in-out;
   }
   .btn-circle:hover,
   .btn-circle:focus {
     outline: none;
     color: white;
     background: rgba(255, 255, 255, 0.1);
   }
   .btn-circle i.animated {
     -webkit-transition-property: -webkit-transform;
     -webkit-transition-duration: 1s;
     -moz-transition-property: -moz-transform;
     -moz-transition-duration: 1s;
   }
   .btn-circle:hover i.animated {
     -webkit-animation-name: pulse;
     -moz-animation-name: pulse;
     -webkit-animation-duration: 1.5s;
     -moz-animation-duration: 1.5s;
     -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
   }
   @-webkit-keyframes pulse {
     0% {
       -webkit-transform: scale(1);
       transform: scale(1);
     }
     50% {
       -webkit-transform: scale(1.2);
       transform: scale(1.2);
     }
     100% {
       -webkit-transform: scale(1);
       transform: scale(1);
     }
   }
   @-moz-keyframes pulse {
     0% {
       -moz-transform: scale(1);
       transform: scale(1);
     }
     50% {
       -moz-transform: scale(1.2);
       transform: scale(1.2);
     }
     100% {
       -moz-transform: scale(1);
       transform: scale(1);
     }
   }
   .content-section {
     padding-top: 100px;
     height: 100%;
   }

   #map {
     width: 100%;
     height: 200px;
     margin-top: 100px;
   }
   @media (min-width: 767px) {
     .content-section {
       height: 100%;
       padding-top: 250px;
     }
     .download-section {
       padding: 100px 0;
     }
     #map {
       height: 400px;
       margin-top: 250px;
     }
   }
   .btn {
     text-transform: uppercase;
     font-family: Tahoma, Geneva, sans-serif;
     font-weight: 400;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     border-radius: 0;
   }
   .btn-default {
     border: 1px solid #42DCA3;
     color: #42DCA3;
     background-color: transparent;
   }
   .btn-default:hover,
   .btn-default:focus {
     border: 1px solid #42DCA3;
     outline: none;
     color: black;
     background-color: #42DCA3;
   }
   ul.banner-social-buttons {
     margin-top: 0;
   }
   @media (max-width: 1199px) {
     ul.banner-social-buttons {
       margin-top: 15px;
     }
   }
   @media (max-width: 767px) {
     ul.banner-social-buttons li {
       display: block;
       margin-bottom: 20px;
       padding: 0;
     }
     ul.banner-social-buttons li:last-child {
       margin-bottom: 0;
     }
   }
   footer {
     padding: 50px 0;
   }
   footer p {
     margin: 0;
   }
   ::-moz-selection {
     text-shadow: none;
     background: #fcfcfc;
     background: rgba(255, 255, 255, 0.2);
   }
   ::selection {
     text-shadow: none;
     background: #fcfcfc;
     background: rgba(255, 255, 255, 0.2);
   }
   img::selection {
     background: transparent;
   }
   img::-moz-selection {
     background: transparent;
   }
   body {
     webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
   }

   .scrollnav-custom {
     margin-bottom: 0;
     border-bottom: 0px solid rgba(255, 255, 255, 0.3);
     font-family: Tahoma, Geneva, sans-serif
     background-color: black;
   }
   .scrollnav-custom .scrollnav-toggle {
     color: white;
     background-color: rgba(255, 255, 255, 0.2);
     font-size: 12px;
   }
   .scrollnav-custom .scrollnav-toggle:focus,
   .scrollnav-custom .scrollnav-toggle:active {
     outline: none;
   }
   .scrollnav-custom .scrollnav-brand {
     font-weight: 700;
   }
   .scrollnav-custom .scrollnav-brand img {
     height: 40px;
   }
   .scrollnav-custom .scrollnav-brand:focus {
     outline: none;
   }
   .scrollnav-custom a {
     color: white;
   }
   .scrollnav-custom .nav li a {
     -webkit-transition: background 0.3s ease-in-out;
     -moz-transition: background 0.3s ease-in-out;
     transition: background 0.3s ease-in-out;
   }
   .scrollnav-custom .nav li a:hover {
     color: rgba(255, 255, 255, 0.8);
     outline: none;
     background-color: transparent;
   }
   .scrollnav-custom .nav li a:focus,
   .scrollnav-custom .nav li a:active {
     outline: none;
     background-color: transparent;
   }
   .scrollnav-custom .nav li.active {
     outline: none;
   }
   .scrollnav-custom .nav li.active a {
     background-color: rgba(255, 255, 255, 0.3);
   }
   .scrollnav-custom .nav li.active a:hover {
     color: white;
   }
   @media (min-width: 768px) {
     .scrollnav-custom {
       padding: 0;
       letter-spacing: 1px;
       background: black;
       border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     }
   }
   .navbar-brand img {
     height: 100%;
   }
   .sponsor-section {
     background-color: white;
     color: black;
   }
   </style>

   <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">

               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                   Menu 
               </button>
               <a class="navbar-brand page-scroll" href="#page-top">
                   D.I.V.E.R.T.
               </a>

• <a href="#page-top"></a>
• <a href="#">Team</a>
• <a href="#">Project</a>
• <a href="#">Parts</a>
• <a href="#">Safety</a>
• <a href="#">Human Practices</a>
• <a href="#">Awards</a>
• <a href="#">Sponsors</a>

   </nav>

   <nav class="navbar scrollnav-custom navbar-fixed-bottom" role="navigation" id="scrollnav">

               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                   Menu 
               </button>
               <a class="navbar-brand" target="_blank"  href="https://www.facebook.com">
                   <img src="fb.png" alt="Facebook" >
               </a>
               <a class="navbar-brand" target="_blank"  href="https://www.twitter.com">
                   <img src="twitter.png" alt="Twitter" >
               </a>

• <a href="#page-top"></a>
• <a class="page-scroll" href="#Welcome">Welcome</a>
• <a class="page-scroll" href="#Sponsors">Sponsors</a>

   </nav>

   <header class="intro">

D.I.V.E.R.T.

The Next Step of Evolution.
Created by BOKU Vienna.

                       <a href="#about" class="btn btn-circle page-scroll">
                           
                       </a>

   </header>

   <section id="Welcome" class="container content-section text-center">

Welcome

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

   </section>

   <section id="Sponsors" class="container content-section text-center">

Sponsors

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

   </section>

   <footer>

Copyright © Your Website 2016

   </footer>

   <script src="https://2017.igem.org/common/jquery-latest.min.js"></script>

   <script type="text/javascript" src="https://2017.igem.org/Template:BOKU-Vienna/bootstrap.js?action=raw&ctype=text/javascript"></script>

   <script type="text/javascript" src="https://2017.igem.org/Template:BOKU-Vienna/jquers.easing.min.js?action=raw&ctype=text/javascript"></script>

   <script>
   // jQuery to collapse the navbar on scroll
   function collapseNavbar() {
       if ($(".navbar").offset().top > 50) {
           $(".navbar-fixed-top").addClass("top-nav-collapse");
           $(".navbar-custom a").css("color", "white");
           $(".navbar-fixed-bottom").show();
       } else {
           $(".navbar-fixed-top").removeClass("top-nav-collapse");
           $(".navbar-custom a").css("color", "black");
           $(".navbar-fixed-bottom").hide();
       }
   }

   $(window).scroll(collapseNavbar);
   $(document).ready(collapseNavbar);

   // jQuery for page scrolling feature - requires jQuery Easing plugin
   $(function() {
       $('a.page-scroll').bind('click', function(event) {
           var $anchor = $(this);
           $('html, body').stop().animate({
               scrollTop: $($anchor.attr('href')).offset().top
           }, 1500, 'easeInOutExpo');
           event.preventDefault();
       });
   });

   // Closes the Responsive Menu on Menu Item Click
   $('.navbar-collapse ul li a').click(function() {
       $(".navbar-collapse").collapse('hide');
   });

   </script>

</html>