Line 1: | Line 1: | ||
+ | {{TU_Delft/Style}} | ||
<html> | <html> | ||
Revision as of 11:54, 9 September 2016
- delft p{font-size: 15px;}
.project img{max-width:100%} .practices img{max-width:100%} .hardware img{max-width:100%} .modeling img{max-width:100%} .collaboration img{max-width:100%;} .team img{max-width:100%;}
.practices li{ text-align: justify;}
strong{
color:#119ED8; font-weight:700;
}
- delft table{
font-size:15px; max-width:100%}
- delft td{
padding:7px;}
- delft li{
font-size:15px;}
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;
}
- delft .phone-name a p{
display:none; font-size: 12px;
}
- delft .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: -8px; list-style: none; background: #119ED8; padding: 0; width: 200px; margin-left: -40px; 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: 60px; 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: -37px; margin-left: 100%; min-width: 250px;}
.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:-210px; 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: 10px; 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;
}
.warning{ color:black; font-weight:bold; font-size:16px; border: solid red 3px;} .warning p{ padding:10px;}
/*============= practises====================*/ .practices ul{ padding-bottom: 10px;}
.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%;}
/*======modeling===========*/ .tooltip {
position: relative; display: inline-block; opacity:1; font-size:15px; color:#119ED8; font-weight: bold;
}
.tooltip .tooltiptext {
visibility: hidden; max-width:50%; background-color: white; color: black; text-align: left; border-radius: 6px; border:solid 2px #119ED8; padding: 5px; font-family:Arial; font-size:14px; font-weight:initial; /* Position the tooltip */ position: fixed; z-index: 99999;
}
.tooltip:hover .tooltiptext {
visibility: visible; left:25%; right:auto; top:50%;
bottom:auto; }
.model img{
margin-left:auto;
margin-right:auto;}
/*--hardware----------------------------*/
.hardware .team-member .on-hover{
top:0px;}
.hardware100 img{
width:100%;
}
.hardware .team-member:hover .on-hover{
top:0px;}
.hardware100 img{
width:100%;
}
.hardware100 figure{
padding:20;
}
figure{
padding-bottom: 15px;}
figcaption{ color:gray; text-align:justify; font-size: 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;
padding-bottom: 20px;
}
.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:101%;
}
.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: 101%;
}
/* 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:100%; }
- delft .parts table{
max-width:100%; }
- delft .practices table{
max-width:100%; }
.notebook img{
max-width:90%;
max-height:250px;
}
- delft .protocols table{
max-width:100%; }
- 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 {
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%;
}
- delft .protocols .nav-tabs li{
width: 19%;}
.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;
} .protocols{ padding-bottom: 20px;}
- 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{
background: #119ED8; color: #f3f4f4; 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{
background: white; color: #119ED8; border-color: #8E999D;
}
/* 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: 1200px){
- delft .protocols .nav-tabs li{
width: 23%;}
- delft .protocols .nav-tabs > li > a{
min-height: 90px;}
}
@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-caption {
margin-left: -150px;}
.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) {
- 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; }
}
/* Small devices (tablets, 888px and Down) */
@media (max-width: 888px) {
- delft .bmc p{
font-size: 14px;
} .tooltip .tooltiptext {left:15% max-width:70%; top: 20%; max-height:60%; overflow-y:scroll;}
/*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{
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; }
.title-style-2 {
text-align: left; text-transform: uppercase; font-size: 20px; margin-bottom: 25px;
}
.carousel-home .carousel-title { font-size: 18px; margin: 0; padding-bottom:15px; }
.carousel-home .carousel-subsubtitle{
font-size: 10px; margin:5px;
} }
@media (max-width:650px){ .MJXc-display {
overflow-x:scroll;
}
.carousel-home .carousel-title { font-size: 18px; margin-left: -50px; }
.analysis img{ width:100%;}
.carousel-home .carousel-subtitle { font-size: 16px; margin-left: -50px; }
.carousel-home .carousel-subsubtitle{
font-size: 10px; margin-left:-50px;
}
.carousel-home .carousel-indicators { bottom: 0; }
.carousel-home .carousel-caption {
margin-left:20px;
}
}
@media (max-width:760px){
- delft .protocols .nav-tabs li{
width: 46%;}
- delft .protocols .nav-tabs > li > a{
min-height: 80px;}
} @media (max-width:696px){
- delft .protocols .nav-tabs li{
width: 98%;}
- delft .protocols .nav-tabs > li > a{
min-height: 40px;}
}
/* Extra Small devices (tablets, 480px and Down) */
@media (max-width: 480px) {
.title-style-1 {
font-size:30px;}
- delft .bmc p{
font-size: 10px;
}
.carousel-home .carousel-title { font-size: 16px; margin-left: -50px; } .carousel-home .carousel-subtitle { font-size: 14px; margin-left: -50px; }
.carousel-home .carousel-subsubtitle{
font-size: 8px; margin-left:-50px;
}
.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%;
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%; }