Template:Aalto-Helsinki

<!DOCTYPE html> <style> /*Changes to the top menu*/

top_menu_14 {

position:absolute; background-color: white; border-bottom: 0px; height:0px;

content {

width:auto; margin-left:0px; }

sideMenu {

display:none; }

top_title {

display:none; }

html, body, section, .container { height: 100%; }

a img { width: 80%; }

svg {

margin-left: 6%; }

@font-face { font-family: BebasLight; src: url(BebasNeueLight.ttf); }

span h1 { padding-top: 10%; }

h1 span { color: white; padding: 10px; font-size: larger; text-shadow: 4px 2px gray; text-shadow: 4px 2px rgba(0,0,0,0.5); }

.centerrow { text-align: center; }

.centercol { display: inline-table; float: none; text-align: left; margin-right: 60px; margin-left: 30px; }

.black-bar { padding-top: 15px; padding-bottom: 15px; background-color: #2D2D2A; margin-bottom: 0; border: none; }

.nomargin-right { margin-right: 0; }

.black-bar-bottom { margin-top: 80px; }

/* The black navigation bar, top and bottom */ .black-bar a, .black-bar p{

   color: #fff;
   text-decoration: none;

text-align: center; }

currentLink {

text-decoration: underline; }

.black-bar a:hover {

   color: #BBCDE5;

}

.center { text-align: center; }

.inner, .footer { padding: 20px 0; position: relative; }

.block-container { width: 940px !important; }

.block-wrapper-inner { /*padding-left: 100px;*/ padding-top: 10%; }

.block, .lead { font-size: 20px; }

.justified { text-align: justify; }

.spacing { margin-top: 40px; margin-bottom: 40px; margin-right: 20px; }

body {

  height: 100%;
  /*background: url('/2016/img/final_cropped_background.png') no-repeat;*/
  background-color: white;
  background-size: cover;
 -webkit-font-smoothing: antialiased; /* font smoothing */
 -moz-osx-font-smoothing: grayscale;
 font-family: 'Source Sans Pro', sans-serif;

}

.teambackground { /*background: whitesmoke;*/ }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

.rowborder { margin-bottom: 60px; }

/* Photos */

/* Navigation arrows */

section { text-align: center; position: relative; /*margin: 40px;*/ height: calc(100% - 80px); overflow: hidden; }

section h1 { margin-top: 160px; }

.circle { background-color: rgb(255, 255, 255); /*border-radius: 200px;*/ height: 200px; width: 200px; font-weight: bold; }

/*.lakephoto { /*background: url('/2016/img/lake2.jpg') no-repeat;*/ /*background: url('/Users/Misan/Desktop/iGEM/Wiki/Aalto-Helsinki-2016-Wiki/img/lake2.jpg') no-repeat; background-size: 100%; background-size: cover; background-position: 0% 30%; height: 110%; width: 100%; }*/

/* Emphasis Title KOKEILU

*/

.emphasis-title { margin: 0 0 10px; }

.emphasis-title h1, .emphasis-title h2 { font-size: 64px; letter-spacing: -2px; }

.emphasis-title h1 strong, .emphasis-title h2 strong { font-weight: 700; }

video#bgvid {

   position: fixed;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: -100;
   -ms-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
   background: url(/Users/Misan/Desktop/iGEM/Wiki/Aalto-Helsinki-2016-Wiki/img/lake2.jpg) no-repeat;
   background-size: cover;

}

.sciencephoto { background: url('/2016/img/colorful2.jpg') no-repeat; background-size: 100%; background-position: 0% 0%; height: 110%; width: 100%; }

.handshakephoto { background: url('/2016/img/handshake3.jpg') no-repeat; /*background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/2016/img/handshake.jpg') no-repeat;*/ background-size: 100%; background-position: 0% 0%; height: 110%; width: 100%; }

section nav a { position: absolute; display: block; top: 50%; }

nav a.prevArrow { left: 0; }

nav a.nextArrow { right: 0; }

.nav-circlepop a { margin: 0 30px; width: 50px; height: 50px; }

.nav-circlepop a::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: black; content: ; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: scale(0.9); transform: scale(0.9); }

.nav-circlepop .icon-wrap { position: relative; display: block; margin: 10% 0 0 10%; width: 80%; height: 80%; }

.nav-circlepop a.nextArrow .icon-wrap { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.nav-circlepop a.downArrow .icon-wrap { -webkit-transform: rotate(270deg); transform: rotate(270deg); }

.nav-circlepop .icon-wrap::before, .nav-circlepop .icon-wrap::after { position: absolute; left: 25%; width: 3px; height: 50%; background: black; content: ; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.nav-circlepop .icon-wrap::before { -webkit-transform: translateX(-50%) rotate(30deg); transform: translateX(-50%) rotate(30deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }

.nav-circlepop .icon-wrap::after { top: 50%; -webkit-transform: translateX(-50%) rotate(-30deg); transform: translateX(-50%) rotate(-30deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; }

.nav-circlepop a:hover::before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }

.nav-circlepop a:hover .icon-wrap::before, .nav-circlepop a:hover .icon-wrap::after { /*background: #cc6055;*/ background: white; }

.nav-circlepop a:hover .icon-wrap::before { -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); }

.nav-circlepop a:hover .icon-wrap::after { -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); }

.shrink{ background-color: #FFFFFF; }

.shrink a{ color: black; }

ul {

   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: transparent;

position: fixed; top: 0;

   width: 100%;

}

li {

   float: left;

}

li a {

   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;

}

/* CSS Parallax

.parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; }

.parallax__layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.parallax__layer--base { transform: translateZ(0); }

.parallax__layer--back { transform: translateZ(-1px) scale(2); }*/

/* Mobile style */

@media screen and (max-width: 600px) { #svg { padding-left: 0; margin-top: 20%; width: 100%; }

.lead { font-size: 16px; }

.block-wrapper-inner { padding-left: 0; }

.centercol { margin-right: 0; margin-left: 0; }

.container .col-md-3 { margin-bottom: 60px; }

.handshakephoto { background-position: 0% 25%; } } </style> </html>