Difference between revisions of "Template:TU Delft/Style"

Revision as of 15:41, 16 October 2016 (view source) TessaVergroesen (Talk | contribs) ← Older edit		Revision as of 15:42, 16 October 2016 (view source) TessaVergroesen (Talk | contribs) Newer edit →
Line 3:		Line 3:
	font-weight:700;		font-weight:700;
	}		}
		+	#delft img{ max-width:100%;}
	a {		a {
	color: inherit;		color: inherit;

---

Revision as of 15:42, 16 October 2016

strong{

  color:#119ED8;
  font-weight:700;

}

1. delft img{ max-width:100%;}

a {

color: inherit;

} a:visited{ color: inherit; } a:hover, a:focus, a:active {

color: #8E999D;
text-decoration: none;

} /* =============================================================================

Layout

========================================================================== */ .anchor{

display: block;
height: 80px; /*same height as header*/
margin-top: -80px; /*same height as header*/
visibility: hidden;

} /* Header ================================= */ .navbar-static-top {

margin-top: -13px;
border: 0;
color: #F3F4F4;

} .phone-name a p{

     display:none;
     font-size: 10px;

} .phone-name a:hover p{

     display:inline;
     }

.navbar-top {

background: #119ED8;
font-size: 12px;
padding: 3px;
position: fixed;
width: 100%;
padding-left: 5px;
padding-right: 5px;

} .navbar-top a:hover, .navbar-top a:active, .navbar-top a:focus, .navbar-top a.is-active {

background: none !important;
color: #f3f4f4;

} .navbar-top .list-inline {

margin-bottom: 0;

} .navbar-top .header-contact li {

margin-right: 15px;

} .navbar-top .header-contact li .fa {

margin-right: 5px;

} .navbar-main {

margin-bottom: 0;
background: #119ED8;
margin-top: 27px;
width: 100%;
position: fixed;

} .navbar-main a{ color:#f3f4f4;} .navbar-main .navbar-brand {

border-bottom: none !important;

} .navbar-main a:hover, .navbar-main a:active, .navbar-main a:focus, .navbar-main a.is-active {

color: #119ED8;
border-bottom: 2px solid #f3f4f4;

} .navbar-main .submenu {

position: absolute;

margin-top: -10px;

list-style: none;
background: #119ED8;
padding: 0;
width: 200px;
margin-left: -35px;
visibility: hidden;
top: 85px;
-moz-transition: all, 0.05s;
-o-transition: all, 0.05s;
-webkit-transition: all, 0.05s;
transition: all, 0.05s;

} .navbar-main .submenu li:hover {

background: #f3f4f4;
-moz-transition: all, 0.3s;
-o-transition: all, 0.3s;
-webkit-transition: all, 0.3s;
transition: all, 0.3s;

} .navbar-main .submenu li a {

width: 100%;
border-bottom: none;
text-decoration: none;
padding: 5px 25px;
display: block;
font-size: 16px;

} .navbar-main li a {

font-size: 15px;
padding: 9px;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 2px solid transparent;

} .navbar-main li:hover .submenu {

top: 62px;
z-index:999999;
visibility: visible;
-moz-transition: all, 0.25s;
-o-transition: all, 0.25s;
-webkit-transition: all, 0.25s;
transition: all, 0.25s;

} .navbar-main .icon-bar {

background: #f3f4f4;

} /* Home Slider ================================= */ .carousel-home img {

width: 100%;
margin-top: 15px;
border-bottom: solid #8E999D 5px;
border-top: solid #8E999D 5px;

} .carousel-home .carousel-control {

background: #119ED8;
height: 80px;
width: 40px;
top: 50%;
margin-top: -40px;
-moz-transition: width, 0.3s;
-o-transition: width, 0.3s;
-webkit-transition: width, 0.3s;
transition: width, 0.3s;

} .carousel-home .carousel-control .fa {

font-size: 2.5em;
padding-top: 12px;

} .carousel-home .carousel-control:hover {

width: 50px;

} .carousel-home .carousel-caption {

top: 55%;
bottom: auto;
text-align: left;
margin-left:-150px;
transform: translateY(-50%);

} .carousel-home .carousel-title {

color: #119ED8;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;

} .carousel-home .carousel-subtitle{

font-size: 35px;
text-transform: uppercase;
margin-top: -40px;
font-weight:bold;
color:#f3f4f4;

} .carousel-home .carousel-subsubtitle{

font-size: 25px;
margin-top: 0px;
color:#fff;

} .carousel-home .btn {

margin-top: 30px;

} .section-home {

margin: 30px 0;

} /* home/ about-us ================================= */ .about-us .container:hover .fa-spin-hover{

 -webkit-animation:fa-spin 10s infinite linear;
 animation:fa-spin 10s infinite linear

} .fa-spin-hover:hover{

 -webkit-animation:fa-spin 10s infinite linear;
 animation:fa-spin 10s infinite linear

} .about-us {

margin: 30px;

} .about-us a{ color:#f3f4f4; padding:0px; margin:0px; } .about-us-col {

text-align: center;
background-color: #119ED8;
color: #f3f4f4;
border: solid #8E999D;

padding:10px; } .about-us-col .col-icon-wrapper .fa{

color: #f3f4f4;
text-align: center;

} .about-us-col col-icon-wrapper:hover .fa-spin-hover {

-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;

}

.about-us-col .col-title {

text-transform: uppercase;
font-weight: bold;

} /*===========medal requirements==============*/ .gold{ color:#CFB53B;} .silver{ color:#C0C0C0;} .bronze{ color:#cd7f32;}

/*-- InterLab----*/ .interlab img{

 max-width:100%;

} .interlab figure{

padding-top: 15px;

padding-bottom: 15px; float:middle;} .interlab a{ color: #119ED8;} /*--- team---*/ .member-name{

  color: #119ED8;

} members p{ font-size: 14px;} .advisor img{ max-height: 314px;}

.team-member .on-hover {

position: absolute;
top: 100px;
bottom: 0px;
right: 0px;
width: 100%;
padding: 0px;
color: #119ED8;
text-align: justify;
background: white;
visibility: hidden;
opacity: 0;
-moz-transition: all, 0.5s;
-o-transition: all, 0.5s;
-webkit-transition: all, 0.5s;
transition: all, 0.5s;
overflow-y: scroll;
overflow-x: hidden;

} delft .team-member .on-hover p{

font-size: 15px;}

.team-member:hover .on-hover {

visibility: visible;
opacity: 1;
padding: 10px;
-moz-transition: all, 1s;
-o-transition: all, 1s;
-webkit-transition: all, 1s;
transition: all, 1s;

}

.team-img{

margin-bottom: 15px;
width: 100%;

}

/* igem logo */ .igemlogo { z-index:1000; position: fixed; bottom: 20px; left:0px; } .igemlogo img{ width:100px; } .up a{

 opacity: 0.3;
 position: fixed;
 bottom: 90px;
 right: 0px;
 z-index:1000000;

} /*home did you know---------------------*/ .didyouknow{

z-index:1000;

} .didyouknow img{

 position: fixed;
 bottom: 20px;
 right:0px;
 width:100px;
 max-width:100%;
z-index:1000;

} .didyouknow:hover img{

width:600px;

} .didyouknow p{

 background:white;
 font-family:Arial Black;
 font-weight:900;
 position: fixed;
 bottom: 200px;
 right:230px;
 width:250px;
 height:150;
text-align: justify;
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
transform: rotate(-13deg);
visibility: hidden;
opacity: 0;
z-index:1110;
font-size:14px;

} .didyouknow:hover p{

visibility: visible;
opacity: 1;
padding: 10px;
-moz-transition: all, 1s;
-o-transition: all, 1s;
-webkit-transition: all, 1s;
transition: all, 1s;

} /*-------------------ACHIEVEMENTS--------------------*/ delft .achievements a{ font-weight:bold; color:#119ED8; padding-right:0px;} delft .achievements a:hover{ color:#8E999D;}

/* ============home/reasons ================================= */ .home-reasons {

margin: 0px 0;

} .reasons-col {

position: relative;
padding-bottom: 0px;
border-style: solid;
border-color: #8E999D;
background: #f3f4f4;

} .reasons-col img {

width: 100%;
-moz-transition: all, 0.5s;
-o-transition: all, 0.5s;
-webkit-transition: all, 0.5s;
transition: all, 0.5s;
padding: 20px;

} .reasons-col .reasons-titles {

position: relative;
bottom: 20px;
text-align: center;
background: #119ED8;
width: 100%;
color: #f3f4f4;
text-transform: uppercase;
min-height: 50px;
padding: 0px;

} .reasons-col .reasons-intro{ padding: 10px;} .reasons-col .reasons-title {

font-weight: bold;

} .reasons-col .on-hover {

position: absolute;
bottom: 0;
top: 50px;
width: 100%;
padding: 20px;
font-size:30px;
text-align: justify;
background: #f3f4f4;
border-bottom: 1px solid #f3f4f4;
visibility: hidden;
opacity: 0;
-moz-transition: all, 0.5s;
-o-transition: all, 0.5s;
-webkit-transition: all, 0.5s;
transition: all, 0.5s;
overflow-y: scroll;
overflow-x: hidden;

} .reasons-col:hover .on-hover {

visibility: visible;
opacity: 1;
padding: 20px;
padding-top: 40px;
-moz-transition: all, 1s;
-o-transition: all, 1s;
-webkit-transition: all, 1s;
transition: all, 1s;

} .reasons-col:hover img {

-moz-transform: perspective(1.1) scale3d(1.1, 1.1, 1.1);
-webkit-transform: perspective(1.1) scale3d(1.1, 1.1, 1.1);
transform: perspective(1.1) scale3d(1.1, 1.1, 1.1);

} /* ===============home/causes================================= */ .cause {

padding-bottom: 15px;
margin-bottom: 30px;
border: 1px solid #119ED8;
-moz-transition: all, 0.3s;
-o-transition: all, 0.3s;
-webkit-transition: all, 0.3s;
transition: all, 0.3s;

} .cause .cause-img {

margin-bottom: 15px;
width: 100%;

} .cause .cause-title {

text-align: center;
margin-bottom: 10px;
font-weight: bold;

} .cause .cause-details {

text-align: justify;
padding: 0 15px;
font-size: 16px;
margin-bottom: 15px;
min-height: 115px;

} .cause:hover {

background: #f3f4f4;
color: #119ED8;
border-color: #119ED8;

} /*============= practises====================*/ .practices ul{ padding-bottom: 10px;} .analysis img{ width:45%;} .outreach img {

  width: 100%

} .outreach a{

 text-decoration: none;

} .practices img{ max-width: 100%; } .practices .nav-tabs li{ width:34%; background:#119ED8; font-weight:bold; text-align: center; margin-left: -12px; }

.bmc{

z-index:800;
position: absolute;
text-align: justify;
overflow: hidden;
height: 100%;
width: 100%;
display:block;
top: 0px;
left:0px;
font-weight: bold;
color:#119ED8;

} .bmc2 h3{ color: #119ED8;} .partnership{ position: absolute; top:24%; left:5%; } .activities{ position:absolute; top:24%; left:23%;} .proposition{ position:absolute; top:24%; left:43%;} .resources{ position:absolute; top:52%; left:23%;} .relationships{ position:absolute; top:24%; left:62%;} .segments{ position:absolute; top:24%; left:82%;} .channels{ position:absolute; top:44%; left:62%;} .structure{ position:absolute; top:90%; left:10%;} .streams{ position:absolute; top:90%; left:59%;}

/* project*/ .streepje{ border-bottom:solid #119ED8 2px;} .project a:hover{ color:#8E999D;} .project-col img{

  width: 100%;

} .project-col:hover img{

  -webkit-transform:scale(1.5); /* Safari and Chrome */
  -moz-transform:scale(1.5); /* Firefox */
  -ms-transform:scale(1.5); /* IE 9 */
  -o-transform:scale(1.5); /* Opera */
   transform:scale(1.5);
  background:#f3f4f4;
  z-index: 99999;
  border: 2px #119ED8 solid;

}

.campus img{ height: 360px; }

/*--------------SAfety-------------------*/ .safety a{ font-weight:bold;} .safety img{ max-width: 100%;}

/*--hardware----------------------------*/ .hardware .team-member:hover .on-hover{ top:0px;} .hardware100 img{ width:100%; } .hardware100 figure{ padding:20; } figcaption{ font-weight: bold; padding-bottom: 15px; } iframe{ padding:50px; } .hardwarelist figure{ border: solid #8E999D 3px; float:left; } .hardware100:hover img{ width:150%; margin-left:-25%; border: solid 2px #8E999D; } .right{ float:right; padding:0 20px 20px 0; } /*==========================ligation tool===============================*/ form1 label{ width:280px;} /*============attributions===== */ .expert img{ width:100%; } .attributions .title-style-2{ color: #119ED8;} .attributions .subtitle{ margin-top:-20px; padding-bottom:10px;} /*===============media==============*/ .media img{ width:100%; } .media object{ width:100%; } /*====================sponsors===============*/ .sponsor{ z-index:50;} .sponsor img{

  width: 80%;

} .sponsor .list-unstyled{ font-size: 13px; }

/* =========== references====================== */ .references{ font-size:11px; background:#8E999D; color:white; } .references h4{ color:white; }

/* footer ================================= */ .logo img{

  height: 70px;
  background-color: #f3f4f4;
  margin: 5px;
  max-width:80%;

} .main-footer {

background: #f3f4f4;
color: #119ED8;
width: 99%;

} .footer-top {

background: #119ED8;
min-height: 40px;
color:#f3f4f4; 
width:100%;

}

.main-footer .footer-title {

text-transform: uppercase;
margin-bottom: 10px;
color: black;

} .main-footer .footer-title .title-under {

background: #119ED8;
margin: 15px 0;
text-align: left;

} .main-footer .footer-title .title-under:after {

margin: 0;
background: #119ED8;

} .main-footer .footer-content {

text-align: justify;
font-size: 13px;
color: black;

} .footer-bottom {

background: #119ED8;
padding: 0px;
width: 100%;

}

/* Pages ================================= */ .page-heading {

background: url('../images/heading-bg.jpg?1428795369') no-repeat center;
background-size: cover;
min-height: 190px;
color: #000;
padding: 25px 15px;
margin-bottom: 50px;

} .page-heading .title-under {

background: #119ED8;

} .page-description {

font-size: 18px;

} .main-container {

margin-bottom: 50px;

}

/* Causes ================================= */ .cause-carousel {

margin-top: 15px;
margin-bottom: 30px;

} /* ============================================================================= Module ========================================================================== */ .btn-primary {

background: #115c9b;
border: none;
border-radius: 0;
padding: 10px 25px;
border: 1px solid transparent;
-moz-transition: all, 0.3s;
-o-transition: all, 0.3s;
-webkit-transition: all, 0.3s;
transition: all, 0.3s;
max-width: 80%;
text-align: center;

} .btn-primary:hover {

background: #f3f4f4;
color: #119ED8;
border: 1px solid #119ED8;

} .btn-secondary {

background: #f3f4f4;
color: #119ED8;
border-radius: 0;

} .btn-secondary:hover {

background: #119ED8;
color: #f3f4f4;

} .title-style-1 {

text-align: center;
text-transform: uppercase;
font-size: 50px;
margin-bottom: 50px;

} .title-style-3 {

text-align: left;
font-size: 26px;
margin-bottom: 25px;
margin-left: 40px;

} .title-style-2 {

text-align: left;
text-transform: uppercase;
font-size: 26px;
margin-bottom: 25px;

} .title-style-2 .title-under {

display: block;
margin: 5px 0;

} .title-style-2 .title-under:after {

margin: 0;
margin-top: 10px;

} .title-under {

display: block;
margin: 5px auto;
background: #119ED8;
height: 1px;
width: 280px;

} .title-under:after {

content: ;
display: block;
width: 100px;
background: inherit;
height: 2px;
margin: 0 auto;
margin-top: 10px;

} /* Modal ================================= */ .form-control {

border-radius: 0;
box-shadow: none;

} /* Tables ================================= */

          #delft th{
              background-color:#119ED8;
              padding: 10px;
              color: white;
              border:none;
              border-bottom: 1px solid #199ED8;
              border-collapse: collapse;
              vertical-align: text-top;}
          #delft thead {
              background: #119ED8;
              border: none;
              border-bottom: 1px solid #8E999D;
              color: #f3f4f4;
          }
          #delft .table-style-1 td,
          .table-style-1 th {
              border-bottom: 1px solid #119ED8;
              border-right: 2px solid #119ED8;
          }

delft .notebook table{ max-width:40%; } delft .parts table{ max-width:100%; }

.notebook img{ max-width:90%; max-height:250px; } .protocols table{ width:80%; } delft .table-title h4{ color:#119ED8; font-weight:bold;} delft .table-style-1 thead {

background: #119ED8;
border-bottom: 1px solid #8E999D;
color: #f3f4f4;

} delft .table-style-1 td, .table-style-1 th {

border-bottom: 1px solid #119ED8;
border-right:none;
border-left:none;
border-top:none;

} delft table{

  border: solid;
  border-color: #119ED8;

vertical-align:middle; }

/* Tabs ================================= */ .nav-tabs {

border-bottom-color: #f3f4f4;

} .nav-tabs li{

width: 45%;

} .tab-content{ padding-top: 50px;} .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {

background: #119ED8;
color: #f3f4f4;

} .nav-tabs > li > a {

border-radius: 0;

} .nav-tabs > li > a:hover {

border-color: #119ED8;

} delft .protocols .nav-tabs > li > a{

min-height: 60px;
border: solid #8E999D;

font-size: 16px; } delft .protocols .nav > li > a{

background: white;
color: black;

} delft .protocols .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{

background: #119ED8;
color: #f3f4f4;

} /* Accordion ================================= */ .panel-default {

border-color: #119ED8;
border-radius: 0;

} .panel-heading{

background: #119ED8;
color: #f3f4f4;

} .panel-heading:hover,.panel-heading:active{

background: white;
color: #119ED8;

}

/* Modal ================================= */ .modal .modal-content {

border-radius: 0;

} .modal .modal-header {

background: #119ED8;
color: #f3f4f4;

} .modal .modal-header .close {

font-size: 26px;

}

/* ============================================================================= Responsive ========================================================================== */ /* Large devices (large desktops, 1350px and Down) */ @media (max-width: 1360px) {

.about-us-col {
  padding: 15px;
}

.navbar-main li a { font-size: 13px; padding-right:3px; padding-left:3px;}

.reasons-col:hover .on-hover {
  padding: 15px;
}

.about-us-col { font-size:15px;} .about-us-col h3{ font-size:15px;} } @media (max-width: 1100px){ .navbar-main li a { font-size: 11px;}

.carousel-home .carousel-title {
  font-size: 36px;
}
.carousel-home .carousel-subtitle {
  font-size: 18px;
}

.carousel-home .carousel-subsubtitle{

font-size: 10px;

}

.carousel-home .btn {
  margin-top: 15px;
}

} @media (max-width: 940px){ .navbar-main li a { font-size: 10px;} } /* Medium devices (desktops, 992px and Down) */ @media (max-width: 992px) {

.about-us-col {
  margin-bottom: 25px;
}
.ember {
  margin-bottom: 25px;
}

.reasons-col {
  margin-bottom: 15px;
}
.footer-col {
  margin-bottom: 50px;
}

}

/* Small devices (tablets, 888px and Down) */ @media (max-width: 888px) { delft .bmc p{

font-size: 14px;

} .navbar-main li a { font-size: 15px; padding-top: 15px;} .navbar-main .submenu{ padding-left: 15px; padding:top: 5px;} .about-us-col { font-size:10px; min-width: 100%; padding: 0; padding-top:5px;} .about-us-col h3{ font-size:15px;} .carousel-home img { margin-top:20px; } .didyouknow p{

 bottom: 23%;
 right:40%;
 width:40%;

} .nav-tabs li{

width: 100%;

}

.header-contact {
  text-align: center;
}
.header-contact li {
  margin: 0 !important;
}
.header-social {
  text-align: center;
}
.navbar-main #navbar {
  float: none !important;
}
.navbar-main #navbar a {
  border-bottom: none;
  padding: 5px;
}
.navbar-main .navbar-brand {
  padding: 6px;
}
.navbar-main .submenu {
  position: initial;
  display: none;
  width: 100%;
}
.navbar-main li:hover .submenu,
.navbar-main li:active .submenu,
.navbar-main li:focus .submenu {
  display: block;
}
.navbar-main li:hover .submenu li,
.navbar-main li:active .submenu li,
.navbar-main li:focus .submenu li {
 border-top-color: #119ED8;
}

.carousel-home .carousel-caption {

margin-left:-90px;

} .title-style-2 {

text-align: left;
text-transform: uppercase;
font-size: 20px;
margin-bottom: 25px;

} } @media (max-width:650px){

.carousel-home .carousel-title {
  font-size: 18px;
  margin: 0;
}

.analysis img{ width:100%;}

.carousel-home .carousel-subtitle {
  font-size: 16px;
  margin: 0;
}

.carousel-home .carousel-subsubtitle{

font-size: 10px;
margin:5px;

}

.carousel-home .carousel-indicators {
  bottom: 0;
}

.carousel-home .carousel-caption {

margin-left:20px;

} } /* Extra Small devices (tablets, 480px and Down) */ @media (max-width: 480px) { delft .bmc p{

font-size: 10px;

}

.carousel-home .carousel-title {
  font-size: 16px;
  margin: 0;
}
.carousel-home .carousel-subtitle {
  font-size: 14px;
  margin: 0;
}

.carousel-home .carousel-subsubtitle{

font-size: 8px;
margin:5px;

}

.carousel-home .carousel-indicators {
  bottom: 0;
}

.carousel-home .carousel-caption {

margin-left:20px;

} .igemlogo img{

  width: 30px;}

.didyouknow img{ visibility: hidden;} .logo img{ height: 40px;} } /* ============================================================================= Animations ========================================================================== */ .animate-onscroll {

visibility: hidden;

} .animated {

visibility: visible;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;

} .animated.slow {

-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;

} .animated.fadeIn {

-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;

} @-webkit-keyframes fadeIn {

0% {
  opacity: 0;
}
100% {
  opacity: 1;
}

} @keyframes fadeIn {

0% {
  opacity: 0;
}
100% {
  opacity: 1;
}

} .fadeIn {

-webkit-animation-name: fadeIn;
animation-name: fadeIn;

} @-webkit-keyframes bounceInUp {

0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0);
}
60% {
  opacity: 1;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
}
75% {
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}
90% {
  -webkit-transform: translate3d(0, -5px, 0);
  transform: translate3d(0, -5px, 0);
}
100% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

} @keyframes bounceInUp {

0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0);
}
60% {
  opacity: 1;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
}
75% {
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}
90% {
  -webkit-transform: translate3d(0, -5px, 0);
  transform: translate3d(0, -5px, 0);
}
100% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

} .bounceInUp {

-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;

} @-webkit-keyframes bounceInDown {

0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0);
}
60% {
  opacity: 1;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0);
}
75% {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}
90% {
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
}
100% {
  -webkit-transform: none;
  transform: none;
}

} @keyframes bounceInDown {

0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0);
}
60% {
  opacity: 1;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0);
}
75% {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}
90% {
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
}
100% {
  -webkit-transform: none;
  transform: none;
}

} .bounceInDown {

-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;

} @-webkit-keyframes zoomIn {

0% {
  opacity: 0;
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
  transform: scale3d(0.3, 0.3, 0.3);
}
50% {
  opacity: 1;
}

} @keyframes zoomIn {

0% {
  opacity: 0;
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
  transform: scale3d(0.3, 0.3, 0.3);
}
50% {
  opacity: 1;
}

} .zoomIn {

-webkit-animation-name: zoomIn;
animation-name: zoomIn;

}

vgemcollaboration { background-image:url('https://static.igem.org/mediawiki/2016/d/de/T--Virginia--collabopen.png'); position:absolute; top:0; left:90%; background-size:180px 220px; /*Adjust background-size and the width and height properties here if you wish to resize the icon*/ width:180px; height:220px; z-index:100; } vgemcollaboration:hover { background-image:url('https://static.igem.org/mediawiki/2016/a/a5/T--Virginia--collabclosed.png'); } vgemcollaboration a { display:inline-block; width:100%; height:100%; }