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

Line 1: Line 1:
−
#delft p{font-size: 18px;}
 
−
 
−
 
 
strong{
 
strong{
−
    color:#119ED8;
+
  color:#119ED8;
−
    font-weight:700;
+
  font-weight:700;
 
}
 
}
−
 
+
img{ max-width:100%;}
−
img{
+
−
max-width:100%;}
+
−
 
+
 
a {
 
a {
−
  color: inherit;
+
color: inherit;
 +
} a:visited{ color: inherit; } a:hover, a:focus, a:active {
 +
color: #8E999D;
 +
text-decoration: none;
 
}
 
}
−
a:visited{
 
−
color: inherit;
 
−
}
 
−
a:hover, a:focus, a:active {
 
−
  color: #8E999D;
 
−
  text-decoration: none;
 
−
}
 
−
 
 
/* =============================================================================
 
/* =============================================================================
−
  Layout
+
Layout
−
========================================================================== */
+
========================================================================== */ .anchor{
−
.anchor{
+
display: block;
−
  display: block;
+
height: 80px; /*same height as header*/
−
  height: 80px; /*same height as header*/
+
margin-top: -80px; /*same height as header*/
−
  margin-top: -80px; /*same height as header*/
+
visibility: hidden;
−
  visibility: hidden;
+
 
}
 
}
−
 
+
/* Header ================================= */ .navbar-static-top {
−
/* Header  
+
margin-top: -13px;
−
================================= */
+
border: 0;
−
.navbar-static-top {
+
color: #F3F4F4;
−
  margin-top: -13px;
+
−
  border: 0;
+
−
  color: #F3F4F4;
+
 
}
 
}
−
 
+
.phone-name a p{
−
#delft .phone-name a p{
+
      display:none;
−
      display:none;
+
      font-size: 10px;
−
      font-size: 12px;
+
 
}
 
}
−
 
+
.phone-name a:hover p{
−
#delft .phone-name a:hover p{
+
      display:inline;
−
      display:inline;
+
      }
−
      }
+
−
 
+
 
.navbar-top {
 
.navbar-top {
−
  background: #119ED8;
+
background: #119ED8;
−
  font-size: 12px;
+
font-size: 12px;
−
  padding: 3px;
+
padding: 3px;
−
  position: fixed;
+
position: fixed;
−
  width: 100%;
+
width: 100%;
−
  padding-left: 5px;
+
padding-left: 5px;
−
  padding-right: 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 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-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 {
 
.navbar-main {
−
  margin-bottom: 0;
+
margin-bottom: 0;
−
  background: #119ED8;
+
background: #119ED8;
−
  margin-top: 27px;
+
margin-top: 27px;
−
  width: 100%;
+
width: 100%;
−
  position: fixed;
+
position: fixed;
 
}
 
}
−
 
+
.navbar-main a{ color:#f3f4f4;}
−
.navbar-main a{
+
−
color:#f3f4f4;}
+
−
 
+
 
.navbar-main .navbar-brand {
 
.navbar-main .navbar-brand {
−
  border-bottom: none !important;
+
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 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 {
 
.navbar-main .submenu li:hover {
−
  background: #f3f4f4;
+
background: #f3f4f4;
−
  -moz-transition: all, 0.3s;
+
-moz-transition: all, 0.3s;
−
  -o-transition: all, 0.3s;
+
-o-transition: all, 0.3s;
−
  -webkit-transition: all, 0.3s;
+
-webkit-transition: all, 0.3s;
−
  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;
 
}
 
}
−
.navbar-main .submenu li a {
+
/* Home Slider ================================= */ .carousel-home img {
−
  width: 100%;
+
width: 100%;
−
  border-bottom: none;
+
margin-top: 15px;
−
  text-decoration: none;
+
border-bottom: solid #8E999D 5px;
−
  padding: 5px 25px;
+
border-top: solid #8E999D 5px;
−
  display: block;
+
} .carousel-home .carousel-control {
−
  font-size: 16px;
+
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;
 
}
 
}
−
.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;
 
−
}
 
−
 
−
.navbar-main .submenu li ul{
 
−
  display: none;
 
−
  background:#119ED8;
 
−
  list-style: none;
 
−
  position: absolute;
 
−
  margin-top: -36px;
 
−
  margin-left: 100%;
 
−
  min-width: 180px;}
 
−
 
−
.navbar-main .submenu li:hover ul{
 
−
  display:block;}
 
−
 
−
 
−
 
−
/* 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 {
 
.section-home {
−
  margin: 30px 0;
+
margin: 30px 0;
 
}
 
}
−
 
+
/* home/ about-us ================================= */ .about-us .container:hover .fa-spin-hover{
−
/* home/ about-us  
+
  -webkit-animation:fa-spin 10s infinite linear;
−
================================= */
+
  animation:fa-spin 10s infinite linear
−
.about-us .container:hover .fa-spin-hover{
+
−
  -webkit-animation:fa-spin 10s infinite linear;
+
−
  animation:fa-spin 10s infinite linear
+
 
}
 
}
−
 
 
.fa-spin-hover:hover{
 
.fa-spin-hover:hover{
−
  -webkit-animation:fa-spin 10s infinite linear;
+
  -webkit-animation:fa-spin 10s infinite linear;
−
  animation:fa-spin 10s infinite linear
+
  animation:fa-spin 10s infinite linear
 
}
 
}
−
 
 
.about-us {
 
.about-us {
−
  margin: 30px;
+
margin: 30px;
−
}
+
} .about-us a{ color:#f3f4f4; padding:0px; margin:0px; }
−
.about-us a{
+
−
color:#f3f4f4;
+
−
padding:0px;
+
−
margin:0px;
+
−
}
+
−
 
+
 
.about-us-col {
 
.about-us-col {
−
  text-align: center;
+
text-align: center;
−
  background-color: #119ED8;
+
background-color: #119ED8;
−
  color: #f3f4f4;
+
color: #f3f4f4;
−
  border: solid #8E999D;
+
border: solid #8E999D;
−
padding:10px;
+
padding:10px;
 
}
 
}
−
 
 
.about-us-col .col-icon-wrapper .fa{
 
.about-us-col .col-icon-wrapper .fa{
−
  color: #f3f4f4;
+
color: #f3f4f4;
−
  text-align: center;
+
text-align: center;
 
}
 
}
−
 
 
.about-us-col col-icon-wrapper:hover .fa-spin-hover {
 
.about-us-col col-icon-wrapper:hover .fa-spin-hover {
−
  -webkit-animation: spin 5s infinite linear;
+
-webkit-animation: spin 5s infinite linear;
−
  -moz-animation: spin 2s infinite linear;
+
-moz-animation: spin 2s infinite linear;
−
  -o-animation: spin 2s infinite linear;
+
-o-animation: spin 2s infinite linear;
−
  animation: spin 2s infinite linear;
+
animation: spin 2s infinite linear;
 
}
 
}
−
 
  
 
.about-us-col .col-title {
 
.about-us-col .col-title {
−
  text-transform: uppercase;
+
text-transform: uppercase;
−
  font-weight: bold;
+
font-weight: bold;
−
}
+
} /*===========medal requirements==============*/ .gold{ color:#CFB53B;} .silver{ color:#C0C0C0;} .bronze{ color:#cd7f32;}
−
/*===========medal requirements==============*/
+
−
.gold{
+
−
color:#CFB53B;}
+
−
.silver{
+
−
color:#C0C0C0;}
+
−
.bronze{
+
−
color:#cd7f32;}
+
  
  
−
 
+
/*-- InterLab----*/ .interlab img{
−
 
+
  max-width:100%;
−
/*-- InterLab----*/
+
} .interlab figure{
−
.interlab img{
+
padding-top: 15px;
−
  max-width:100%;
+
padding-bottom: 15px; float:middle;}
−
}
+
−
.interlab figure{
+
−
  padding-top: 15px;
+
−
padding-bottom: 15px;
+
−
float:middle;}
+
−
 
+
 
.interlab a{ color: #119ED8;}
 
.interlab a{ color: #119ED8;}
−
 
+
/*--- team---*/ .member-name{
−
/*--- team---*/
+
  color: #119ED8;
−
.member-name{
+
−
    color: #119ED8;
+
 
}
 
}
−
#members p{
+
members p{
−
font-size: 14px;}
+
font-size: 14px;} .advisor img{ max-height: 314px;}
−
.advisor img{
+
−
max-height: 314px;}
+
−
 
+
  
 
.team-member .on-hover {
 
.team-member .on-hover {
−
  position: absolute;
+
position: absolute;
−
  top: 100px;
+
top: 100px;
−
  bottom: 0px;
+
bottom: 0px;
−
  right: 0px;
+
right: 0px;
−
  width: 100%;
+
width: 100%;
−
  padding: 0px;
+
padding: 0px;
−
  color: #119ED8;
+
color: #119ED8;
−
  text-align: justify;
+
text-align: justify;
−
  background: white;
+
background: white;
−
  visibility: hidden;
+
visibility: hidden;
−
  opacity: 0;
+
opacity: 0;
−
  -moz-transition: all, 0.5s;
+
-moz-transition: all, 0.5s;
−
  -o-transition: all, 0.5s;
+
-o-transition: all, 0.5s;
−
  -webkit-transition: all, 0.5s;
+
-webkit-transition: all, 0.5s;
−
  transition: all, 0.5s;
+
transition: all, 0.5s;
−
  overflow-y: scroll;
+
overflow-y: scroll;
−
  overflow-x: hidden;
+
overflow-x: hidden;
 
}
 
}
−
#delft .team-member .on-hover p{
+
delft .team-member .on-hover p{
−
  font-size: 15px;}
+
font-size: 15px;}
 
.team-member:hover .on-hover {
 
.team-member:hover .on-hover {
−
  visibility: visible;
+
visibility: visible;
−
  opacity: 1;
+
opacity: 1;
−
  padding: 10px;
+
padding: 10px;
−
  -moz-transition: all, 1s;
+
-moz-transition: all, 1s;
−
  -o-transition: all, 1s;
+
-o-transition: all, 1s;
−
  -webkit-transition: all, 1s;
+
-webkit-transition: all, 1s;
−
  transition: all, 1s;
+
transition: all, 1s;
 
}
 
}
−
 
  
 
.team-img{
 
.team-img{
−
  margin-bottom: 15px;
+
margin-bottom: 15px;
−
  width: 100%;
+
width: 100%;
 
}
 
}
  
−
 
+
/* igem logo */ .igemlogo { z-index:1000; position: fixed; bottom: 20px; left:0px; } .igemlogo img{ width:100px; }
−
/* igem logo */
+
.up a{
−
.igemlogo {
+
  opacity: 0.3;
−
z-index:1000;
+
  position: fixed;
−
position: fixed;
+
  bottom: 90px;
−
bottom: 20px;
+
  right: 0px;
−
left:0px;
+
  z-index:1000000;
 
}
 
}
−
.igemlogo img{
+
/*home did you know---------------------*/ .didyouknow{
−
width:100px;
+
z-index:1000;
 
}
 
}
−
.up a{
+
.didyouknow img{
−
  opacity: 0.3;
+
  position: fixed;
−
  position: fixed;
+
  bottom: 20px;
−
  bottom: 90px;
+
  right:0px;
−
  right: 0px;
+
  width:100px;
−
  z-index:1000000;
+
  max-width:100%;
−
  }
+
  z-index:1000;
−
 
+
−
/*home did you know---------------------*/
+
−
.didyouknow{
+
−
  z-index:1000;
+
 
}
 
}
−
 
+
.didyouknow:hover img{
−
.didyouknow img{  
+
width:600px;
−
  position: fixed;
+
−
  bottom: 20px;
+
−
  right:0px;
+
−
  width:100px;
+
−
  max-width:100%;
+
−
  z-index:1000;
+
 
}
 
}
−
 
−
.didyouknow:hover img{
 
−
  width:600px;
 
−
}
 
−
 
 
.didyouknow p{
 
.didyouknow p{
−
  background:white;
+
  background:white;
−
  font-family:Arial Black;
+
  font-family:Arial Black;
−
  font-weight:900;
+
  font-weight:900;
−
  position: fixed;
+
  position: fixed;
−
  bottom: 200px;
+
  bottom: 200px;
−
  right:230px;
+
  right:230px;
−
  width:250px;
+
  width:250px;
−
  height:150;
+
  height:150;
−
  text-align: justify;
+
text-align: justify;
−
  -webkit-transform: rotate(-13deg);
+
-webkit-transform: rotate(-13deg);
−
  -moz-transform: rotate(-13deg);
+
-moz-transform: rotate(-13deg);
−
  -o-transform: rotate(-13deg);
+
-o-transform: rotate(-13deg);
−
  transform: rotate(-13deg);
+
transform: rotate(-13deg);
−
  visibility: hidden;
+
visibility: hidden;
−
  opacity: 0;
+
opacity: 0;
−
  z-index:1110;
+
z-index:1110;
−
  font-size:14px;
+
font-size:14px;
 
}
 
}
−
 
 
.didyouknow:hover p{
 
.didyouknow:hover p{
−
  visibility: visible;
+
visibility: visible;
−
  opacity: 1;
+
opacity: 1;
−
  padding: 10px;
+
padding: 10px;
−
  -moz-transition: all, 1s;
+
-moz-transition: all, 1s;
−
  -o-transition: all, 1s;
+
-o-transition: all, 1s;
−
  -webkit-transition: all, 1s;
+
-webkit-transition: all, 1s;
−
  transition: all, 1s;
+
transition: all, 1s;
−
 
+
 
}
 
}
−
 
 
/*-------------------ACHIEVEMENTS--------------------*/
 
/*-------------------ACHIEVEMENTS--------------------*/
−
#delft .achievements a{
+
delft .achievements a{
−
font-weight:bold;
+
font-weight:bold; color:#119ED8; padding-right:0px;}
−
color:#119ED8;
+
delft .achievements a:hover{
−
padding-right:0px;}
+
−
#delft .achievements a:hover{
+
−
 
+
 
color:#8E999D;}
 
color:#8E999D;}
  
  
  
−
 
+
/* ============home/reasons ================================= */ .home-reasons {
−
 
+
margin: 0px 0;
−
 
+
−
 
+
−
/* ============home/reasons ================================= */
+
−
.home-reasons {
+
−
  margin: 0px 0;
+
 
}
 
}
−
 
 
.reasons-col {
 
.reasons-col {
−
  position: relative;
+
position: relative;
−
  padding-bottom: 0px;
+
padding-bottom: 0px;
−
  border-style: solid;
+
border-style: solid;
−
  border-color: #8E999D;
+
border-color: #8E999D;
−
  background: #f3f4f4;
+
background: #f3f4f4;
−
}
+
} .reasons-col img {
−
.reasons-col img {
+
width: 100%;
−
  width: 100%;
+
-moz-transition: all, 0.5s;
−
  -moz-transition: all, 0.5s;
+
-o-transition: all, 0.5s;
−
  -o-transition: all, 0.5s;
+
-webkit-transition: all, 0.5s;
−
  -webkit-transition: all, 0.5s;
+
transition: all, 0.5s;
−
  transition: all, 0.5s;
+
padding: 20px;
−
  padding: 20px;
+
} .reasons-col .reasons-titles {
−
}
+
position: relative;
−
.reasons-col .reasons-titles {
+
bottom: 20px;
−
  position: relative;
+
text-align: center;
−
  bottom: 20px;
+
background: #119ED8;
−
  text-align: center;
+
width: 100%;
−
  background: #119ED8;
+
color: #f3f4f4;
−
  width: 100%;
+
text-transform: uppercase;
−
  color: #f3f4f4;
+
min-height: 50px;
−
  text-transform: uppercase;
+
padding: 0px;
−
  min-height: 50px;
+
} .reasons-col .reasons-intro{ padding: 10px;}
−
  padding: 0px;
+
−
 
+
−
}
+
−
.reasons-col .reasons-intro{
+
−
padding: 10px;}
+
−
 
+
 
.reasons-col .reasons-title {
 
.reasons-col .reasons-title {
−
  font-weight: bold;
+
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 .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 {
 
.reasons-col:hover .on-hover {
−
  visibility: visible;
+
visibility: visible;
−
  opacity: 1;
+
opacity: 1;
−
  padding: 20px;
+
padding: 20px;
−
  padding-top: 40px;
+
padding-top: 40px;
−
  -moz-transition: all, 1s;
+
-moz-transition: all, 1s;
−
  -o-transition: all, 1s;
+
-o-transition: all, 1s;
−
  -webkit-transition: all, 1s;
+
-webkit-transition: all, 1s;
−
  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);
 
}
 
}
−
.reasons-col:hover img {
+
/* ===============home/causes================================= */ .cause {
−
  -moz-transform: perspective(1.1) scale3d(1.1, 1.1, 1.1);
+
padding-bottom: 15px;
−
  -webkit-transform: perspective(1.1) scale3d(1.1, 1.1, 1.1);
+
margin-bottom: 30px;
−
  transform: perspective(1.1) scale3d(1.1, 1.1, 1.1);
+
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;}
−
/* ===============home/causes================================= */
+
.analysis img{ width:45%;}
−
.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 {
 
.outreach img {
−
    width: 100%
+
  width: 100%
 +
} .outreach a{
 +
  text-decoration: none;
 
}
 
}
−
.outreach a{
+
.practices img{ max-width: 100%; } .practices .nav-tabs li{ width:34%; background:#119ED8; font-weight:bold; text-align: center; margin-left: -12px; }
−
  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{
 
.bmc{
−
  z-index:800;
+
z-index:800;
−
  position: absolute;
+
position: absolute;
−
  text-align: justify;
+
text-align: justify;
−
  overflow: hidden;
+
overflow: hidden;
−
  height: 100%;
+
height: 100%;
−
  width: 100%;
+
width: 100%;
−
  display:block;
+
display:block;
−
  top: 0px;
+
top: 0px;
−
  left:0px;
+
left:0px;
−
  font-weight: bold;
+
font-weight: bold;
−
  color:#119ED8;
+
color:#119ED8;
−
}
+
} .bmc2 h3{ color: #119ED8;}
−
.bmc2 h3{
+
.partnership{ position: absolute; top:24%; left:5%; } .activities{ position:absolute; top:24%; left:23%;}
−
color: #119ED8;}
+
.proposition{ position:absolute; top:24%; left:43%;}
−
 
+
.resources{ position:absolute; top:52%; left:23%;}
−
.partnership{
+
.relationships{ position:absolute; top:24%; left:62%;}
−
position: absolute;
+
.segments{ position:absolute; top:24%; left:82%;}
−
top:24%;
+
.channels{ position:absolute; top:44%; left:62%;}
−
left:5%;
+
.structure{ position:absolute; top:90%; left:10%;}
−
}
+
.streams{ position:absolute; top:90%; left:59%;}
−
.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*/ .streepje{ border-bottom:solid #119ED8 2px;}
 +
.project a:hover{ color:#8E999D;}
 
.project-col img{
 
.project-col img{
−
    width: 100%;
+
  width: 100%;
−
}
+
} .project-col:hover img{
−
.project-col:hover img{
+
  -webkit-transform:scale(1.5); /* Safari and Chrome */
−
    -webkit-transform:scale(1.5); /* Safari and Chrome */
+
  -moz-transform:scale(1.5); /* Firefox */
−
    -moz-transform:scale(1.5); /* Firefox */
+
  -ms-transform:scale(1.5); /* IE 9 */
−
    -ms-transform:scale(1.5); /* IE 9 */
+
  -o-transform:scale(1.5); /* Opera */
−
    -o-transform:scale(1.5); /* Opera */
+
    transform:scale(1.5);
−
    transform:scale(1.5);
+
  background:#f3f4f4;
−
    background:#f3f4f4;
+
  z-index: 99999;
−
    z-index: 99999;
+
  border: 2px #119ED8 solid;
−
    border: 2px #119ED8 solid;
+
 
}
 
}
  
 +
.campus img{ height: 360px; }
  
 +
/*--------------SAfety-------------------*/ .safety a{ font-weight:bold;}
 +
.safety img{ max-width: 100%;}
  
−
.campus img{
+
/*--hardware----------------------------*/ .hardware .team-member:hover .on-hover{ top:0px;} .hardware100 img{ width:100%; } .hardware100 figure{ padding:20; }
−
height: 360px;
+
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; }
−
/*--------------SAfety-------------------*/
+
.right{ float:right; padding:0 20px 20px 0; } /*==========================ligation tool===============================*/
−
.safety a{
+
form1 label{
−
font-weight:bold;}
+
−
 
+
−
.safety img{
+
−
max-width: 100%;}
+
−
 
+
−
/*======modeling===========*/
+
−
.model img{
+
−
margin-left:auto;
+
−
margin-right:auto;}
+
−
 
+
−
 
+
−
/*--hardware----------------------------*/
+
−
.hardware .team-member:hover .on-hover{
+
−
top:0px;}
+
−
.hardware100 img{
+
−
width:100%;
+
−
}
+
−
.hardware100 figure{
+
−
padding:20;
+
−
}
+
−
figure{
+
−
padding-bottom: 15px;}
+
−
 
+
−
figcaption{
+
−
color:gray;
+
−
}
+
−
 
+
−
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;}
 
width:280px;}
−
 
+
/*============attributions===== */ .expert img{ width:100%; } .attributions .title-style-2{ color: #119ED8;} .attributions .subtitle{ margin-top:-20px; padding-bottom:10px;}
−
/*============attributions===== */
+
/*===============media==============*/ .media img{ width:100%; } .media object{ width:100%; }
−
.expert img{
+
/*====================sponsors===============*/ .sponsor{ z-index:50;} .sponsor img{
−
width:100%;
+
  width: 80%;
 
}
 
}
−
.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{
 
.sponsor .list-unstyled{
−
font-size: 13px;
+
font-size: 13px;
 
}
 
}
  
 +
/* =========== references====================== */ .references{ font-size:11px; background:#8E999D; color:white; } .references h4{ color:white; }
  
−
/* =========== references====================== */
+
/* footer ================================= */
−
.references{
+
−
font-size:11px;
+
−
background:#8E999D;
+
−
color:white;
+
−
padding-bottom: 20px;
+
−
}
+
−
.references h4{
+
−
color:white;
+
−
}
+
−
 
+
−
 
+
−
/* footer  
+
−
================================= */
+
−
 
+
 
.logo img{
 
.logo img{
−
    height: 70px;
+
  height: 70px;
−
    background-color: #f3f4f4;
+
  background-color: #f3f4f4;
−
    margin: 5px;
+
  margin: 5px;
−
    max-width:80%;
+
  max-width:80%;
 
}
 
}
−
   
 
 
.main-footer {
 
.main-footer {
−
  background: #f3f4f4;
+
background: #f3f4f4;
−
  color: #119ED8;
+
color: #119ED8;
−
  width: 99%;
+
width: 99%;
 
}
 
}
−
 
 
.footer-top {
 
.footer-top {
−
  background: #119ED8;
+
background: #119ED8;
−
  min-height: 40px;
+
min-height: 40px;
−
  color:#f3f4f4;  
+
color:#f3f4f4;  
−
  width:101%;
+
width:100%;
 
}
 
}
−
 
  
 
.main-footer .footer-title {
 
.main-footer .footer-title {
−
  text-transform: uppercase;
+
text-transform: uppercase;
−
  margin-bottom: 10px;
+
margin-bottom: 10px;
−
  color: black;
+
color: black;
 
}
 
}
−
 
 
.main-footer .footer-title .title-under {
 
.main-footer .footer-title .title-under {
−
  background: #119ED8;
+
background: #119ED8;
−
  margin: 15px 0;
+
margin: 15px 0;
−
  text-align: left;
+
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;
 
}
 
}
−
.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 {
 
.footer-bottom {
−
  background: #119ED8;
+
background: #119ED8;
−
  padding: 0px;
+
padding: 0px;
−
  width: 100%;
+
width: 100%;
 
}
 
}
  
−
 
+
/* Pages ================================= */ .page-heading {
−
/* Pages  
+
background: url('../images/heading-bg.jpg?1428795369') no-repeat center;
−
================================= */
+
background-size: cover;
−
.page-heading {
+
min-height: 190px;
−
  background: url('../images/heading-bg.jpg?1428795369') no-repeat center;
+
color: #000;
−
  background-size: cover;
+
padding: 25px 15px;
−
  min-height: 190px;
+
margin-bottom: 50px;
−
  color: #000;
+
} .page-heading .title-under {
−
  padding: 25px 15px;
+
background: #119ED8;
−
  margin-bottom: 50px;
+
 
}
 
}
−
.page-heading .title-under {
 
−
  background: #119ED8;
 
−
}
 
−
 
 
.page-description {
 
.page-description {
−
  font-size: 18px;
+
font-size: 18px;
 
}
 
}
−
 
 
.main-container {
 
.main-container {
−
  margin-bottom: 50px;
+
margin-bottom: 50px;
 
}
 
}
  
−
 
+
/* Causes ================================= */ .cause-carousel {
−
/* Causes  
+
margin-top: 15px;
−
================================= */
+
margin-bottom: 30px;
−
.cause-carousel {
+
−
  margin-top: 15px;
+
−
  margin-bottom: 30px;
+
 
}
 
}
−
 
+
/* ============================================================================= Module ========================================================================== */ .btn-primary {
−
/* =============================================================================
+
background: #115c9b;
−
Module
+
border: none;
−
========================================================================== */
+
border-radius: 0;
−
.btn-primary {
+
padding: 10px 25px;
−
  background: #115c9b;
+
border: 1px solid transparent;
−
  border: none;
+
-moz-transition: all, 0.3s;
−
  border-radius: 0;
+
-o-transition: all, 0.3s;
−
  padding: 10px 25px;
+
-webkit-transition: all, 0.3s;
−
  border: 1px solid transparent;
+
transition: all, 0.3s;
−
  -moz-transition: all, 0.3s;
+
max-width: 80%;
−
  -o-transition: all, 0.3s;
+
text-align: center;
−
  -webkit-transition: all, 0.3s;
+
} .btn-primary:hover {
−
  transition: all, 0.3s;
+
background: #f3f4f4;
−
  max-width: 80%;
+
color: #119ED8;
−
  text-align: center;
+
border: 1px solid #119ED8;
 
}
 
}
−
.btn-primary:hover {
 
−
  background: #f3f4f4;
 
−
  color: #119ED8;
 
−
  border: 1px solid #119ED8;
 
−
}
 
−
 
 
.btn-secondary {
 
.btn-secondary {
−
  background: #f3f4f4;
+
background: #f3f4f4;
−
  color: #119ED8;
+
color: #119ED8;
−
  border-radius: 0;
+
border-radius: 0;
 +
} .btn-secondary:hover {
 +
background: #119ED8;
 +
color: #f3f4f4;
 
}
 
}
−
.btn-secondary:hover {
 
−
  background: #119ED8;
 
−
  color: #f3f4f4;
 
−
}
 
−
 
 
.title-style-1 {
 
.title-style-1 {
−
  text-align: center;
+
text-align: center;
−
  text-transform: uppercase;
+
text-transform: uppercase;
−
  font-size: 50px;
+
font-size: 50px;
−
  margin-bottom: 50px;
+
margin-bottom: 50px;
−
;
+
 
}
 
}
−
 
 
.title-style-3 {
 
.title-style-3 {
−
  text-align: left;
+
text-align: left;
−
  font-size: 26px;
+
font-size: 26px;
−
  margin-bottom: 25px;
+
margin-bottom: 25px;
−
  margin-left: 40px;
+
margin-left: 40px;
 
}
 
}
−
 
 
.title-style-2 {
 
.title-style-2 {
−
  text-align: left;
+
text-align: left;
−
  text-transform: uppercase;
+
text-transform: uppercase;
−
  font-size: 26px;
+
font-size: 26px;
−
  margin-bottom: 25px;
+
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-style-2 .title-under {
 
−
  display: block;
 
−
  margin: 5px 0;
 
−
}
 
−
.title-style-2 .title-under:after {
 
−
  margin: 0;
 
−
  margin-top: 10px;
 
−
}
 
−
 
 
.title-under {
 
.title-under {
−
  display: block;
+
display: block;
−
  margin: 5px auto;
+
margin: 5px auto;
−
  background: #119ED8;
+
background: #119ED8;
−
  height: 1px;
+
height: 1px;
−
  width: 280px;
+
width: 280px;
 +
} .title-under:after {
 +
content: ;
 +
display: block;
 +
width: 100px;
 +
background: inherit;
 +
height: 2px;
 +
margin: 0 auto;
 +
margin-top: 10px;
 
}
 
}
−
.title-under:after {
+
/* Modal ================================= */ .form-control {
−
  content: '';
+
border-radius: 0;
−
  display: block;
+
box-shadow: none;
−
  width: 100px;
+
−
  background: inherit;
+
−
  height: 2px;
+
−
  margin: 0 auto;
+
−
  margin-top: 10px;
+
 
}
 
}
 +
/* 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%; }
  
−
/* Modal
+
.notebook img{ max-width:90%; max-height:250px; } .protocols table{ width:80%; }
−
================================= */
+
delft .table-title h4{
−
.form-control {
+
color:#119ED8; font-weight:bold;}
−
  border-radius: 0;
+
delft .table-style-1 thead {
−
  box-shadow: none;
+
background: #119ED8;
 +
border-bottom: 1px solid #8E999D;
 +
color: #f3f4f4;
 
}
 
}
−
 
+
delft .table-style-1 td,
−
/* 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:100%;
+
−
}
+
−
 
+
−
#delft .parts table{
+
−
max-width:100%;
+
−
}
+
−
 
+
−
 
+
−
.notebook img{
+
−
max-width:90%;
+
−
max-height:250px;
+
−
}
+
−
#delft .protocols table{
+
−
max-width:95%;
+
−
}
+
−
#delft .protocols td{
+
−
vertical-align:middle;}
+
−
.protocols td{
+
−
text-align: center;}
+
−
 
+
−
#delft .firstcolumn{
+
−
text-align:left;}
+
−
 
+
−
#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 {
 
.table-style-1 th {
−
  border-bottom: 1px solid #119ED8;
+
border-bottom: 1px solid #119ED8;
−
  border-right:none;
+
border-right:none;
−
  border-left:none;
+
border-left:none;
−
  border-top:none;
+
border-top:none;
−
}
+
−
#delft table{
+
−
    border: solid;
+
−
    border-color: #119ED8;
+
−
vertical-align:middle;
+
 
}
 
}
 +
delft table{
 +
  border: solid;
 +
  border-color: #119ED8;
 +
vertical-align:middle; }
  
−
/* Tabs
+
/* Tabs ================================= */ .nav-tabs {
−
================================= */
+
border-bottom-color: #f3f4f4;
−
.nav-tabs {
+
−
  border-bottom-color: #f3f4f4;
+
 
}
 
}
−
 
 
.nav-tabs li{
 
.nav-tabs li{
−
  width: 45%;
+
width: 45%;
−
}  
+
} .tab-content{ padding-top: 50px;}
−
#delft .protocols .nav-tabs li{
+
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
−
width: 19%;}
+
background: #119ED8;
−
 
+
color: #f3f4f4;
−
 
+
−
.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 {
 
.nav-tabs > li > a {
−
  border-radius: 0;
+
border-radius: 0;
 
}
 
}
−
 
 
.nav-tabs > li > a:hover {
 
.nav-tabs > li > a:hover {
−
  border-color: #119ED8;
+
border-color: #119ED8;
 
}
 
}
−
.protocols{
+
delft .protocols .nav-tabs > li > a{
−
padding-bottom: 20px;}
+
min-height: 60px;
−
 
+
border: solid #8E999D;
−
 
+
font-size: 16px;
−
#delft .protocols .nav-tabs > li > a{
+
−
  min-height: 110px;
+
−
  border: solid black 1px;
+
−
  border-radius: 5px;
+
−
  font-size: 16px;
+
−
  margin: 2px;
+
−
  vertical-align:middle;
+
 
}
 
}
−
#delft .protocols .nav > li > a{
+
delft .protocols .nav > li > a{
−
  background: #119ED8;
+
background: white;
−
  color: #f3f4f4;
+
color: black;
−
  font-weight: bold;
+
−
  text-align:center;}
+
−
 
+
−
#delft .protocols .nav-tabs > li:hover> a, .nav-tabs > li:hover> a:hover, .nav-tabs > li:hover> a:hover{
+
−
  background: white;
+
−
  color: #119ED8;
+
−
  border-color: #8E999D;
+
 
}
 
}
−
#delft .protocols .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
+
delft .protocols .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
−
  background: white;
+
background: #119ED8;
−
  color: #119ED8;
+
color: #f3f4f4;
−
  border-color: #8E999D;
+
 
}
 
}
−
 
+
/* Accordion ================================= */ .panel-default {
−
/* Accordion
+
border-color: #119ED8;
−
================================= */
+
border-radius: 0;
−
.panel-default {
+
} .panel-heading{
−
  border-color: #119ED8;
+
background: #119ED8;
−
  border-radius: 0;
+
color: #f3f4f4;
 +
} .panel-heading:hover,.panel-heading:active{
 +
background: white;
 +
color: #119ED8;
 
}
 
}
−
.panel-heading{
 
−
  background: #119ED8;
 
−
  color: #f3f4f4;
 
−
}
 
−
.panel-heading:hover,.panel-heading:active{
 
−
  background: white;
 
−
  color: #119ED8;
 
−
}
 
−
 
  
−
/* Modal
+
/* Modal ================================= */ .modal .modal-content {
−
================================= */
+
border-radius: 0;
−
.modal .modal-content {
+
} .modal .modal-header {
−
  border-radius: 0;
+
background: #119ED8;
−
}
+
color: #f3f4f4;
−
.modal .modal-header {
+
} .modal .modal-header .close {
−
  background: #119ED8;
+
font-size: 26px;
−
  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;
−
Responsive
+
}
−
========================================================================== */
+
.navbar-main li a { font-size: 13px; padding-right:3px; padding-left:3px;}
−
/* Large devices (large desktops, 1350px and Down) */
+
.reasons-col:hover .on-hover {
−
@media (max-width: 1360px) {
+
  padding: 15px;
−
  .about-us-col {
+
}
−
    padding: 15px;
+
.about-us-col { font-size:15px;} .about-us-col h3{ font-size: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;}
  
−
@media (max-width: 1200px){
+
.carousel-home .carousel-title {
−
#delft .protocols .nav-tabs li{
+
  font-size: 36px;
−
width: 23%;}
+
}
−
#delft .protocols .nav-tabs > li > a{
+
.carousel-home .carousel-subtitle {
−
  min-height: 90px;}
+
  font-size: 18px;
−
}
+
}
−
 
+
−
@media (max-width: 1100px){
+
−
.navbar-main li a {
+
−
font-size: 11px;}
+
−
.navbar-main .submenu li a{
+
−
  font-size: 11px;
+
−
padding:3px;
+
−
padding-left: 5px;}
+
−
 
+
−
  .carousel-home .carousel-title {
+
−
    font-size: 36px;
+
−
  }
+
−
  .carousel-home .carousel-subtitle {
+
−
    font-size: 18px;
+
−
  }
+
 
.carousel-home .carousel-subsubtitle{
 
.carousel-home .carousel-subsubtitle{
−
  font-size: 10px;
+
font-size: 10px;
 
}
 
}
−
  .carousel-home .btn {
+
.carousel-home .btn {
−
    margin-top: 15px;
+
  margin-top: 15px;
−
  }
+
}
 
}
 
}
−
 
+
@media (max-width: 940px){ .navbar-main li a { font-size: 10px;} }
−
@media (max-width: 940px){
+
/* Medium devices (desktops, 992px and Down) */ @media (max-width: 992px) {
−
.navbar-main li a {
+
.about-us-col {
−
font-size: 10px;}
+
  margin-bottom: 25px;
 +
}
 +
.ember {
 +
  margin-bottom: 25px;
 +
}
 +
 +
.reasons-col {
 +
  margin-bottom: 15px;
 +
}
 +
.footer-col {
 +
  margin-bottom: 50px;
 +
}
 
}
 
}
  
−
/* Medium devices (desktops, 992px and Down) */
+
/* Small devices (tablets, 888px and Down) */ @media (max-width: 888px) {
−
@media (max-width: 992px) {
+
delft .bmc p{
−
 
+
font-size: 14px;
−
#delft .protocols .nav-tabs li{
+
−
width: 30%;}
+
−
#delft .protocols .nav-tabs > li > a{
+
−
  min-height: 130px;}
+
−
 
+
−
  .about-us-col {
+
−
    margin-bottom: 25px;
+
−
  }
+
−
  .ember {
+
−
    margin-bottom: 25px;
+
−
  }
+
−
 
+
−
  .reasons-col {
+
−
    margin-bottom: 15px;
+
−
  }
+
−
 
+
−
  .footer-col {
+
−
    margin-bottom: 50px;
+
−
  }
+
−
 
+
 
}
 
}
−
 
+
.navbar-main li a { font-size: 15px; padding-top: 15px;}
−
 
+
.navbar-main .submenu{ padding-left: 15px; padding:top: 5px;}
−
/* Small devices (tablets, 888px and Down) */
+
.about-us-col { font-size:10px; min-width: 100%; padding: 0; padding-top:5px;} .about-us-col h3{ font-size:15px;}
−
@media (max-width: 888px) {
+
.carousel-home img { margin-top:20px; }
−
#delft .bmc p{
+
−
  font-size: 14px;
+
−
}
+
−
/*subsubmenu*/
+
−
 
+
−
.navbar-main  li li:hover ul {margin-left:0px; margin-top:0px; display:block;z-index:9999999999999}
+
−
 
+
−
.MJXc-display {
+
−
  font-size:80%;}
+
−
 
+
−
.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{
 
.didyouknow p{
−
  bottom: 23%;
+
  bottom: 23%;
−
  right:40%;
+
  right:40%;
−
  width:40%;
+
  width:40%;
−
 
+
} .nav-tabs li{
 +
width: 100%;
 
}
 
}
−
.nav-tabs li{
+
.header-contact {
−
  width: 100%;
+
  text-align: center;
−
}
+
}
−
  .header-contact {
+
.header-contact li {
−
    text-align: center;
+
  margin: 0 !important;
−
  }
+
}
−
  .header-contact li {
+
.header-social {
−
    margin: 0 !important;
+
  text-align: center;
−
  }
+
}
−
 
+
.navbar-main #navbar {
−
  .header-social {
+
  float: none !important;
−
    text-align: center;
+
}
−
  }
+
.navbar-main #navbar a {
−
 
+
  border-bottom: none;
−
  .navbar-main #navbar {
+
  padding: 5px;
−
    float: none !important;
+
}
−
  }
+
.navbar-main .navbar-brand {
−
  .navbar-main #navbar a {
+
  padding: 6px;
−
    border-bottom: none;
+
}
−
    padding: 5px;
+
.navbar-main .submenu {
−
  }
+
  position: initial;
−
  .navbar-main .navbar-brand {
+
  display: none;
−
    padding: 6px;
+
  width: 100%;
−
  }
+
}
−
  .navbar-main .submenu {
+
.navbar-main li:hover .submenu,
−
    position: initial;
+
.navbar-main li:active .submenu,
−
    display: none;
+
.navbar-main li:focus .submenu {
−
    width: 100%;
+
  display: block;
−
  }
+
}
−
  .navbar-main li:hover .submenu,
+
.navbar-main li:hover .submenu li,
−
  .navbar-main li:active .submenu,
+
.navbar-main li:active .submenu li,
−
  .navbar-main li:focus .submenu {
+
.navbar-main li:focus .submenu li {
−
    display: block;
+
  border-top-color: #119ED8;
−
  }
+
}
−
  .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 {
 
.carousel-home .carousel-caption {
−
  margin-left:-90px;
+
margin-left:-90px;
 
}
 
}
−
 
 
 
.title-style-2 {
 
.title-style-2 {
−
  text-align: left;
+
text-align: left;
−
  text-transform: uppercase;
+
text-transform: uppercase;
−
  font-size: 20px;
+
font-size: 20px;
−
  margin-bottom: 25px;
+
margin-bottom: 25px;
−
}
+
} }
−
}
+
−
 
+
 
@media (max-width:650px){
 
@media (max-width:650px){
−
.MJXc-display {
+
.carousel-home .carousel-title {
−
  overflow-x:scroll;
+
  font-size: 18px;
−
}
+
  margin: 0;
−
  .carousel-home .carousel-title {
+
}
−
    font-size: 18px;
+
.analysis img{ width:100%;}
−
    margin: 0;
+
.carousel-home .carousel-subtitle {
−
  }
+
  font-size: 16px;
−
.analysis img{
+
  margin: 0;
−
width:100%;}
+
}
−
  .carousel-home .carousel-subtitle {
+
−
    font-size: 16px;
+
−
    margin: 0;
+
−
  }
+
 
.carousel-home .carousel-subsubtitle{
 
.carousel-home .carousel-subsubtitle{
−
  font-size: 10px;
+
font-size: 10px;
−
  margin:5px;
+
margin:5px;
 
}
 
}
−
  .carousel-home .carousel-indicators {
+
.carousel-home .carousel-indicators {
−
    bottom: 0;
+
  bottom: 0;
−
  }
+
}
 
.carousel-home .carousel-caption {
 
.carousel-home .carousel-caption {
−
  margin-left:20px;
+
margin-left:20px;
 
}
 
}
−
 
 
}
 
}
−
 
+
/* Extra Small devices (tablets, 480px and Down) */ @media (max-width: 480px) {
−
@media (max-width:760px){
+
delft .bmc p{
−
#delft .protocols .nav-tabs li{
+
font-size: 10px;
−
width: 46%;}
+
−
#delft .protocols .nav-tabs > li > a{
+
−
  min-height: 80px;}
+
 
}
 
}
−
@media (max-width:696px){
+
.carousel-home .carousel-title {
−
#delft .protocols .nav-tabs li{
+
  font-size: 16px;
−
width: 98%;}
+
  margin: 0;
−
#delft .protocols .nav-tabs > li > a{
+
}
−
  min-height: 40px;}
+
.carousel-home .carousel-subtitle {
−
}
+
  font-size: 14px;
−
 
+
  margin: 0;
−
 
+
}
−
/* 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{
 
.carousel-home .carousel-subsubtitle{
−
  font-size: 8px;
+
font-size: 8px;
−
  margin:5px;
+
margin:5px;
 
}
 
}
−
  .carousel-home .carousel-indicators {
+
.carousel-home .carousel-indicators {
−
    bottom: 0;
+
  bottom: 0;
−
  }
+
}
 
.carousel-home .carousel-caption {
 
.carousel-home .carousel-caption {
−
  margin-left:20px;
+
margin-left:20px;
 
}
 
}
−
 
 
.igemlogo img{
 
.igemlogo img{
−
    width: 30px;}
+
  width: 30px;}
−
.didyouknow img{
+
.didyouknow img{ visibility: hidden;}
−
visibility: hidden;}
+
.logo img{ height: 40px;} } /* ============================================================================= Animations ========================================================================== */ .animate-onscroll {
−
 
+
visibility: hidden;
−
.logo img{
+
−
height: 40px;}
+
 
}
 
}
−
/* =============================================================================
 
−
Animations
 
−
========================================================================== */
 
−
.animate-onscroll {
 
−
  visibility: hidden;
 
−
}
 
−
 
 
.animated {
 
.animated {
−
  visibility: visible;
+
visibility: visible;
−
  -webkit-animation-duration: 1s;
+
-webkit-animation-duration: 1s;
−
  animation-duration: 1s;
+
animation-duration: 1s;
−
  -webkit-animation-fill-mode: both;
+
-webkit-animation-fill-mode: both;
−
  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;
 
}
 
}
−
.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 {
 
@-webkit-keyframes fadeIn {
−
  0% {
+
0% {
−
    opacity: 0;
+
  opacity: 0;
−
  }
+
}
−
  100% {
+
100% {
−
    opacity: 1;
+
  opacity: 1;
−
  }
+
}
 +
} @keyframes fadeIn {
 +
0% {
 +
  opacity: 0;
 +
}
 +
100% {
 +
  opacity: 1;
 +
}
 +
} .fadeIn {
 +
-webkit-animation-name: fadeIn;
 +
animation-name: fadeIn;
 
}
 
}
−
@keyframes fadeIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
  }
 
−
}
 
−
.fadeIn {
 
−
  -webkit-animation-name: fadeIn;
 
−
  animation-name: fadeIn;
 
−
}
 
−
 
 
@-webkit-keyframes bounceInUp {
 
@-webkit-keyframes bounceInUp {
−
  0%, 60%, 75%, 90%, 100% {
+
0%, 60%, 75%, 90%, 100% {
−
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
  -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);
+
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
−
  }
+
}
−
  0% {
+
0% {
−
    opacity: 0;
+
  opacity: 0;
−
    -webkit-transform: translate3d(0, 3000px, 0);
+
  -webkit-transform: translate3d(0, 3000px, 0);
−
    transform: translate3d(0, 3000px, 0);
+
  transform: translate3d(0, 3000px, 0);
−
  }
+
}
−
  60% {
+
60% {
−
    opacity: 1;
+
  opacity: 1;
−
    -webkit-transform: translate3d(0, -20px, 0);
+
  -webkit-transform: translate3d(0, -20px, 0);
−
    transform: translate3d(0, -20px, 0);
+
  transform: translate3d(0, -20px, 0);
−
  }
+
}
−
  75% {
+
75% {
−
    -webkit-transform: translate3d(0, 10px, 0);
+
  -webkit-transform: translate3d(0, 10px, 0);
−
    transform: translate3d(0, 10px, 0);
+
  transform: translate3d(0, 10px, 0);
−
  }
+
}
−
  90% {
+
90% {
−
    -webkit-transform: translate3d(0, -5px, 0);
+
  -webkit-transform: translate3d(0, -5px, 0);
−
    transform: translate3d(0, -5px, 0);
+
  transform: translate3d(0, -5px, 0);
−
  }
+
}
−
  100% {
+
100% {
−
    -webkit-transform: translate3d(0, 0, 0);
+
  -webkit-transform: translate3d(0, 0, 0);
−
    transform: translate3d(0, 0, 0);
+
  transform: translate3d(0, 0, 0);
−
  }
+
}
−
}
+
} @keyframes bounceInUp {
−
@keyframes bounceInUp {
+
0%, 60%, 75%, 90%, 100% {
−
  0%, 60%, 75%, 90%, 100% {
+
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
−
    -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);
−
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
}
−
  }
+
0% {
−
  0% {
+
  opacity: 0;
−
    opacity: 0;
+
  -webkit-transform: translate3d(0, 3000px, 0);
−
    -webkit-transform: translate3d(0, 3000px, 0);
+
  transform: translate3d(0, 3000px, 0);
−
    transform: translate3d(0, 3000px, 0);
+
}
−
  }
+
60% {
−
  60% {
+
  opacity: 1;
−
    opacity: 1;
+
  -webkit-transform: translate3d(0, -20px, 0);
−
    -webkit-transform: translate3d(0, -20px, 0);
+
  transform: translate3d(0, -20px, 0);
−
    transform: translate3d(0, -20px, 0);
+
}
−
  }
+
75% {
−
  75% {
+
  -webkit-transform: translate3d(0, 10px, 0);
−
    -webkit-transform: translate3d(0, 10px, 0);
+
  transform: translate3d(0, 10px, 0);
−
    transform: translate3d(0, 10px, 0);
+
}
−
  }
+
90% {
−
  90% {
+
  -webkit-transform: translate3d(0, -5px, 0);
−
    -webkit-transform: translate3d(0, -5px, 0);
+
  transform: translate3d(0, -5px, 0);
−
    transform: translate3d(0, -5px, 0);
+
}
−
  }
+
100% {
−
  100% {
+
  -webkit-transform: translate3d(0, 0, 0);
−
    -webkit-transform: translate3d(0, 0, 0);
+
  transform: translate3d(0, 0, 0);
−
    transform: translate3d(0, 0, 0);
+
}
−
  }
+
} .bounceInUp {
−
}
+
-webkit-animation-name: bounceInUp;
−
.bounceInUp {
+
animation-name: bounceInUp;
−
  -webkit-animation-name: bounceInUp;
+
−
  animation-name: bounceInUp;
+
 
}
 
}
−
 
 
@-webkit-keyframes bounceInDown {
 
@-webkit-keyframes bounceInDown {
−
  0%, 60%, 75%, 90%, 100% {
+
0%, 60%, 75%, 90%, 100% {
−
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
  -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);
+
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
−
  }
+
}
−
  0% {
+
0% {
−
    opacity: 0;
+
  opacity: 0;
−
    -webkit-transform: translate3d(0, -3000px, 0);
+
  -webkit-transform: translate3d(0, -3000px, 0);
−
    transform: translate3d(0, -3000px, 0);
+
  transform: translate3d(0, -3000px, 0);
−
  }
+
}
−
  60% {
+
60% {
−
    opacity: 1;
+
  opacity: 1;
−
    -webkit-transform: translate3d(0, 25px, 0);
+
  -webkit-transform: translate3d(0, 25px, 0);
−
    transform: translate3d(0, 25px, 0);
+
  transform: translate3d(0, 25px, 0);
−
  }
+
}
−
  75% {
+
75% {
−
    -webkit-transform: translate3d(0, -10px, 0);
+
  -webkit-transform: translate3d(0, -10px, 0);
−
    transform: translate3d(0, -10px, 0);
+
  transform: translate3d(0, -10px, 0);
−
  }
+
}
−
  90% {
+
90% {
−
    -webkit-transform: translate3d(0, 5px, 0);
+
  -webkit-transform: translate3d(0, 5px, 0);
−
    transform: translate3d(0, 5px, 0);
+
  transform: translate3d(0, 5px, 0);
−
  }
+
}
−
  100% {
+
100% {
−
    -webkit-transform: none;
+
  -webkit-transform: none;
−
    transform: none;
+
  transform: none;
−
  }
+
}
−
}
+
} @keyframes bounceInDown {
−
@keyframes bounceInDown {
+
0%, 60%, 75%, 90%, 100% {
−
  0%, 60%, 75%, 90%, 100% {
+
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
−
    -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);
−
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
}
−
  }
+
0% {
−
  0% {
+
  opacity: 0;
−
    opacity: 0;
+
  -webkit-transform: translate3d(0, -3000px, 0);
−
    -webkit-transform: translate3d(0, -3000px, 0);
+
  transform: translate3d(0, -3000px, 0);
−
    transform: translate3d(0, -3000px, 0);
+
}
−
  }
+
60% {
−
  60% {
+
  opacity: 1;
−
    opacity: 1;
+
  -webkit-transform: translate3d(0, 25px, 0);
−
    -webkit-transform: translate3d(0, 25px, 0);
+
  transform: translate3d(0, 25px, 0);
−
    transform: translate3d(0, 25px, 0);
+
}
−
  }
+
75% {
−
  75% {
+
  -webkit-transform: translate3d(0, -10px, 0);
−
    -webkit-transform: translate3d(0, -10px, 0);
+
  transform: translate3d(0, -10px, 0);
−
    transform: translate3d(0, -10px, 0);
+
}
−
  }
+
90% {
−
  90% {
+
  -webkit-transform: translate3d(0, 5px, 0);
−
    -webkit-transform: translate3d(0, 5px, 0);
+
  transform: translate3d(0, 5px, 0);
−
    transform: translate3d(0, 5px, 0);
+
}
−
  }
+
100% {
−
  100% {
+
  -webkit-transform: none;
−
    -webkit-transform: none;
+
  transform: none;
−
    transform: none;
+
}
−
  }
+
} .bounceInDown {
−
}
+
-webkit-animation-name: bounceInDown;
−
.bounceInDown {
+
animation-name: bounceInDown;
−
  -webkit-animation-name: bounceInDown;
+
−
  animation-name: bounceInDown;
+
 
}
 
}
−
 
 
@-webkit-keyframes zoomIn {
 
@-webkit-keyframes zoomIn {
−
  0% {
+
0% {
−
    opacity: 0;
+
  opacity: 0;
−
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
−
    transform: scale3d(0.3, 0.3, 0.3);
+
  transform: scale3d(0.3, 0.3, 0.3);
−
  }
+
}
−
  50% {
+
50% {
−
    opacity: 1;
+
  opacity: 1;
−
  }
+
}
−
}
+
} @keyframes zoomIn {
−
@keyframes zoomIn {
+
0% {
−
  0% {
+
  opacity: 0;
−
    opacity: 0;
+
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
−
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+
  transform: scale3d(0.3, 0.3, 0.3);
−
    transform: scale3d(0.3, 0.3, 0.3);
+
}
−
  }
+
50% {
−
  50% {
+
  opacity: 1;
−
    opacity: 1;
+
}
−
  }
+
} .zoomIn {
−
}
+
-webkit-animation-name: zoomIn;
−
.zoomIn {
+
animation-name: zoomIn;
−
  -webkit-animation-name: zoomIn;
+
−
  animation-name: zoomIn;
+
 
}
 
}
  
−
 
+
vgemcollaboration {
−
#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; }
−
background-image:url('https://static.igem.org/mediawiki/2016/d/de/T--Virginia--collabopen.png');
+
vgemcollaboration:hover {
−
position:absolute;
+
background-image:url('https://static.igem.org/mediawiki/2016/a/a5/T--Virginia--collabclosed.png'); }
−
top:0;
+
vgemcollaboration a {
−
left:90%;
+
display:inline-block; width:100%; height:100%; }
−
        right: 10%;
+
−
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:999;
+
−
}
+
−
 
+
−
#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%;
+
−
}
+

Revision as of 15:39, 16 October 2016

strong{ 

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

} 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%; }