Line 1: | Line 1: | ||
− | + | #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 { | a { | ||
color: inherit; | color: inherit; | ||
+ | } | ||
+ | a:visited{ | ||
+ | color: inherit; | ||
} | } | ||
a:hover, a:focus, a:active { | a:hover, a:focus, a:active { | ||
− | color: # | + | color: #8E999D; |
+ | text-decoration: none; | ||
} | } | ||
Line 15: | Line 39: | ||
Layout | Layout | ||
========================================================================== */ | ========================================================================== */ | ||
+ | .anchor{ | ||
+ | display: block; | ||
+ | height: 80px; /*same height as header*/ | ||
+ | margin-top: -80px; /*same height as header*/ | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
/* Header | /* Header | ||
================================= */ | ================================= */ | ||
Line 22: | Line 53: | ||
color: #F3F4F4; | color: #F3F4F4; | ||
} | } | ||
+ | |||
+ | #delft .phone-name a p{ | ||
+ | display:none; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | #delft .phone-name a:hover p{ | ||
+ | display:inline; | ||
+ | } | ||
.navbar-top { | .navbar-top { | ||
Line 29: | Line 69: | ||
position: fixed; | position: fixed; | ||
width: 100%; | width: 100%; | ||
− | padding-left: | + | padding-left: 5px; |
− | padding-right: | + | padding-right: 5px; |
} | } | ||
Line 38: | Line 78: | ||
.navbar-top a.is-active { | .navbar-top a.is-active { | ||
background: none !important; | background: none !important; | ||
− | color: # | + | color: #f3f4f4; |
} | } | ||
Line 53: | Line 93: | ||
.navbar-main { | .navbar-main { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
− | |||
background: #119ED8; | background: #119ED8; | ||
− | margin-top: | + | margin-top: 27px; |
− | + | ||
width: 100%; | width: 100%; | ||
+ | position: fixed; | ||
} | } | ||
+ | |||
+ | .navbar-main a{ | ||
+ | color:#f3f4f4;} | ||
+ | |||
.navbar-main .navbar-brand { | .navbar-main .navbar-brand { | ||
border-bottom: none !important; | border-bottom: none !important; | ||
Line 66: | Line 109: | ||
.navbar-main a:focus, | .navbar-main a:focus, | ||
.navbar-main a.is-active { | .navbar-main a.is-active { | ||
− | + | color: #119ED8; | |
− | color: | + | border-bottom: 2px solid #f3f4f4; |
− | border-bottom: 2px solid # | + | |
} | } | ||
.navbar-main .submenu { | .navbar-main .submenu { | ||
position: absolute; | position: absolute; | ||
− | margin-top: | + | margin-top: -8px; |
list-style: none; | list-style: none; | ||
background: #119ED8; | background: #119ED8; | ||
padding: 0; | padding: 0; | ||
width: 200px; | width: 200px; | ||
− | left: - | + | margin-left: -40px; |
visibility: hidden; | visibility: hidden; | ||
top: 85px; | top: 85px; | ||
Line 87: | Line 129: | ||
.navbar-main .submenu li:hover { | .navbar-main .submenu li:hover { | ||
− | background: # | + | background: #f3f4f4; |
-moz-transition: all, 0.3s; | -moz-transition: all, 0.3s; | ||
-o-transition: all, 0.3s; | -o-transition: all, 0.3s; | ||
Line 102: | Line 144: | ||
} | } | ||
.navbar-main li a { | .navbar-main li a { | ||
− | font-size: | + | font-size: 15px; |
− | padding: | + | padding: 9px; |
+ | padding-top: 15px; | ||
+ | padding-bottom: 15px; | ||
border-bottom: 2px solid transparent; | border-bottom: 2px solid transparent; | ||
} | } | ||
− | .navbar-main li:hover .submenu { | + | .navbar-main li:hover .submenu{ |
− | top: | + | top: 60px; |
+ | z-index:999999; | ||
visibility: visible; | visibility: visible; | ||
-moz-transition: all, 0.25s; | -moz-transition: all, 0.25s; | ||
Line 115: | Line 160: | ||
} | } | ||
.navbar-main .icon-bar { | .navbar-main .icon-bar { | ||
− | background: # | + | 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 | /* Home Slider | ||
Line 123: | Line 182: | ||
width: 100%; | width: 100%; | ||
margin-top: 15px; | margin-top: 15px; | ||
+ | border-bottom: solid #8E999D 5px; | ||
+ | border-top: solid #8E999D 5px; | ||
} | } | ||
.carousel-home .carousel-control { | .carousel-home .carousel-control { | ||
Line 143: | Line 204: | ||
} | } | ||
.carousel-home .carousel-caption { | .carousel-home .carousel-caption { | ||
− | top: | + | top: 55%; |
bottom: auto; | bottom: auto; | ||
+ | text-align: left; | ||
+ | margin-left:-210px; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
} | } | ||
.carousel-home .carousel-title { | .carousel-home .carousel-title { | ||
− | color: # | + | color: #119ED8; |
font-size: 50px; | font-size: 50px; | ||
font-weight: bold; | font-weight: bold; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
− | + | ||
} | } | ||
− | .carousel-home .carousel-subtitle { | + | .carousel-home .carousel-subtitle{ |
− | font-size: | + | font-size: 35px; |
text-transform: uppercase; | 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 { | .carousel-home .btn { | ||
Line 168: | Line 239: | ||
/* home/ about-us | /* 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 { | .about-us { | ||
margin: 30px; | margin: 30px; | ||
+ | } | ||
+ | .about-us a{ | ||
+ | color:#f3f4f4; | ||
+ | padding:0px; | ||
+ | margin:0px; | ||
} | } | ||
.about-us-col { | .about-us-col { | ||
− | |||
− | |||
text-align: center; | text-align: center; | ||
− | background-color: | + | background-color: #119ED8; |
− | + | color: #f3f4f4; | |
− | + | border: solid #8E999D; | |
− | + | padding:10px; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | .about-us-col .col-icon-wrapper { | + | |
− | + | .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 { | .about-us-col .col-title { | ||
text-transform: uppercase; | 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{ | .member-name{ | ||
color: #119ED8; | color: #119ED8; | ||
} | } | ||
+ | #members p{ | ||
+ | font-size: 14px;} | ||
+ | .advisor img{ | ||
+ | max-height: 314px;} | ||
+ | |||
+ | |||
.team-member .on-hover { | .team-member .on-hover { | ||
position: absolute; | position: absolute; | ||
− | top: | + | top: 100px; |
bottom: 0px; | bottom: 0px; | ||
− | right: | + | right: 0px; |
width: 100%; | width: 100%; | ||
− | padding: | + | padding: 10px; |
color: #119ED8; | color: #119ED8; | ||
text-align: justify; | text-align: justify; | ||
− | background: | + | background: white; |
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
Line 214: | Line 331: | ||
-webkit-transition: all, 0.5s; | -webkit-transition: all, 0.5s; | ||
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 { | .team-member:hover .on-hover { | ||
visibility: visible; | visibility: visible; | ||
Line 225: | Line 346: | ||
} | } | ||
− | /* home/ | + | |
− | ================================= */ | + | .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 { | .home-reasons { | ||
− | margin: | + | margin: 0px 0; |
} | } | ||
.reasons-col { | .reasons-col { | ||
position: relative; | position: relative; | ||
− | + | padding-bottom: 0px; | |
− | padding-bottom: | + | |
border-style: solid; | border-style: solid; | ||
border-color: #8E999D; | border-color: #8E999D; | ||
− | background: #f3f4f4 | + | background: #f3f4f4; |
} | } | ||
.reasons-col img { | .reasons-col img { | ||
Line 249: | Line 457: | ||
.reasons-col .reasons-titles { | .reasons-col .reasons-titles { | ||
position: relative; | position: relative; | ||
− | bottom: | + | bottom: 20px; |
text-align: center; | text-align: center; | ||
background: #119ED8; | background: #119ED8; | ||
width: 100%; | width: 100%; | ||
− | color: # | + | color: #f3f4f4; |
text-transform: uppercase; | text-transform: uppercase; | ||
− | height: | + | min-height: 50px; |
− | padding: | + | 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 { | .reasons-col .on-hover { | ||
position: absolute; | position: absolute; | ||
bottom: 0; | bottom: 0; | ||
− | top: | + | top: 50px; |
width: 100%; | width: 100%; | ||
− | padding: | + | padding: 20px; |
− | + | font-size:30px; | |
text-align: justify; | text-align: justify; | ||
background: #f3f4f4; | background: #f3f4f4; | ||
− | border-bottom: 1px solid # | + | border-bottom: 1px solid #f3f4f4; |
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
Line 277: | Line 490: | ||
-webkit-transition: all, 0.5s; | -webkit-transition: all, 0.5s; | ||
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; | ||
Line 298: | Line 511: | ||
} | } | ||
− | /* home/causes | + | /* ===============home/causes================================= */ |
− | ================================= */ | + | |
.cause { | .cause { | ||
padding-bottom: 15px; | padding-bottom: 15px; | ||
Line 308: | Line 520: | ||
-webkit-transition: all, 0.3s; | -webkit-transition: all, 0.3s; | ||
transition: all, 0.3s; | transition: all, 0.3s; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.cause .cause-img { | .cause .cause-img { | ||
Line 330: | Line 533: | ||
text-align: justify; | text-align: justify; | ||
padding: 0 15px; | padding: 0 15px; | ||
− | font-size: | + | font-size: 16px; |
margin-bottom: 15px; | margin-bottom: 15px; | ||
min-height: 115px; | min-height: 115px; | ||
} | } | ||
.cause:hover { | .cause:hover { | ||
− | background: # | + | background: #f3f4f4; |
− | color: # | + | color: #119ED8; |
− | border-color: # | + | 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; | ||
} | } | ||
Line 343: | Line 803: | ||
/* footer | /* footer | ||
================================= */ | ================================= */ | ||
− | + | ||
− | height: | + | .logo img{ |
+ | height: 70px; | ||
background-color: #f3f4f4; | background-color: #f3f4f4; | ||
margin: 5px; | margin: 5px; | ||
+ | max-width:80%; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.main-footer { | .main-footer { | ||
background: #f3f4f4; | background: #f3f4f4; | ||
color: #119ED8; | color: #119ED8; | ||
+ | width: 99%; | ||
} | } | ||
− | + | ||
− | + | .footer-top { | |
+ | background: #119ED8; | ||
+ | min-height: 40px; | ||
+ | color:#f3f4f4; | ||
+ | width:101%; | ||
} | } | ||
+ | |||
+ | |||
.main-footer .footer-title { | .main-footer .footer-title { | ||
text-transform: uppercase; | text-transform: uppercase; | ||
Line 367: | Line 830: | ||
color: black; | color: black; | ||
} | } | ||
+ | |||
.main-footer .footer-title .title-under { | .main-footer .footer-title .title-under { | ||
background: #119ED8; | background: #119ED8; | ||
Line 384: | Line 848: | ||
.footer-bottom { | .footer-bottom { | ||
background: #119ED8; | background: #119ED8; | ||
− | padding: | + | padding: 0px; |
+ | width: 101%; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* Pages | /* Pages | ||
Line 451: | Line 875: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* Causes | /* Causes | ||
Line 518: | Line 896: | ||
-webkit-transition: all, 0.3s; | -webkit-transition: all, 0.3s; | ||
transition: all, 0.3s; | transition: all, 0.3s; | ||
+ | max-width: 80%; | ||
+ | text-align: center; | ||
} | } | ||
.btn-primary:hover { | .btn-primary:hover { | ||
− | background: # | + | background: #f3f4f4; |
color: #119ED8; | color: #119ED8; | ||
border: 1px solid #119ED8; | border: 1px solid #119ED8; | ||
Line 526: | Line 906: | ||
.btn-secondary { | .btn-secondary { | ||
− | background: # | + | background: #f3f4f4; |
color: #119ED8; | color: #119ED8; | ||
border-radius: 0; | border-radius: 0; | ||
Line 532: | Line 912: | ||
.btn-secondary:hover { | .btn-secondary:hover { | ||
background: #119ED8; | background: #119ED8; | ||
− | color: # | + | color: #f3f4f4; |
} | } | ||
Line 541: | Line 921: | ||
margin-bottom: 50px; | margin-bottom: 50px; | ||
; | ; | ||
+ | } | ||
+ | |||
+ | .title-style-3 { | ||
+ | text-align: left; | ||
+ | font-size: 26px; | ||
+ | margin-bottom: 25px; | ||
+ | margin-left: 40px; | ||
} | } | ||
Line 582: | Line 969: | ||
} | } | ||
− | /* | + | /* 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%; | ||
} | } | ||
− | .table- | + | |
− | .table | + | #delft .parts table{ |
− | + | max-width:100%; | |
+ | } | ||
+ | #delft .practices table{ | ||
+ | max-width:100%; | ||
} | } | ||
− | . | + | |
− | + | .notebook img{ | |
− | + | max-width:90%; | |
− | + | max-height:250px; | |
} | } | ||
− | .table- | + | #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; | background: #119ED8; | ||
− | color: # | + | border-bottom: 1px solid #8E999D; |
+ | color: #f3f4f4; | ||
} | } | ||
− | .table-style- | + | #delft .table-style-1 td, |
− | .table-style- | + | .table-style-1 th { |
border-bottom: 1px solid #119ED8; | border-bottom: 1px solid #119ED8; | ||
+ | border-right:none; | ||
+ | border-left:none; | ||
+ | border-top:none; | ||
+ | } | ||
+ | #delft table{ | ||
+ | border: solid; | ||
+ | border-color: #119ED8; | ||
+ | vertical-align:middle; | ||
} | } | ||
Line 611: | Line 1,044: | ||
================================= */ | ================================= */ | ||
.nav-tabs { | .nav-tabs { | ||
− | border-bottom-color: # | + | 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, | ||
Line 619: | Line 1,061: | ||
.nav-tabs > li.active > a:focus { | .nav-tabs > li.active > a:focus { | ||
background: #119ED8; | background: #119ED8; | ||
− | color: # | + | color: #f3f4f4; |
+ | |||
} | } | ||
Line 627: | Line 1,070: | ||
.nav-tabs > li > a:hover { | .nav-tabs > li > a:hover { | ||
− | border-color: #119ED8 | + | border-color: #119ED8; |
} | } | ||
+ | .protocols{ | ||
+ | padding-bottom: 20px;} | ||
− | .nav > li > a:hover, .nav > li > a:focus { | + | |
− | background: # | + | #delft .protocols .nav-tabs > li > a{ |
− | color: # | + | 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; | ||
} | } | ||
Line 641: | Line 1,107: | ||
border-radius: 0; | border-radius: 0; | ||
} | } | ||
− | + | .panel-heading{ | |
background: #119ED8; | background: #119ED8; | ||
− | color: # | + | color: #f3f4f4; |
} | } | ||
− | .panel- | + | .panel-heading:hover,.panel-heading:active{ |
− | background: # | + | background: white; |
+ | color: #119ED8; | ||
} | } | ||
+ | |||
/* Modal | /* Modal | ||
Line 656: | Line 1,124: | ||
.modal .modal-header { | .modal .modal-header { | ||
background: #119ED8; | background: #119ED8; | ||
− | color: # | + | color: #f3f4f4; |
} | } | ||
.modal .modal-header .close { | .modal .modal-header .close { | ||
Line 662: | Line 1,130: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Line 734: | Line 1,135: | ||
Responsive | Responsive | ||
========================================================================== */ | ========================================================================== */ | ||
− | /* Large devices (large desktops, | + | /* Large devices (large desktops, 1350px and Down) */ |
− | @media (max-width: | + | @media (max-width: 1360px) { |
.about-us-col { | .about-us-col { | ||
padding: 15px; | padding: 15px; | ||
} | } | ||
+ | .navbar-main li a { | ||
+ | font-size: 13px; | ||
+ | padding-right:3px; | ||
+ | padding-left:3px;} | ||
.reasons-col:hover .on-hover { | .reasons-col:hover .on-hover { | ||
Line 744: | Line 1,149: | ||
} | } | ||
− | + | .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: | + | @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 { | .carousel-home .carousel-title { | ||
font-size: 36px; | font-size: 36px; | ||
Line 757: | Line 1,179: | ||
font-size: 18px; | font-size: 18px; | ||
} | } | ||
+ | .carousel-home .carousel-subsubtitle{ | ||
+ | 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;} | ||
+ | } | ||
+ | |||
+ | /* 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 { | .about-us-col { | ||
margin-bottom: 25px; | margin-bottom: 25px; | ||
Line 768: | Line 1,208: | ||
.reasons-col { | .reasons-col { | ||
− | margin-bottom: | + | margin-bottom: 15px; |
} | } | ||
Line 774: | Line 1,214: | ||
margin-bottom: 50px; | margin-bottom: 50px; | ||
} | } | ||
− | + | ||
} | } | ||
− | /* Small devices (tablets, | + | |
− | @media (max-width: | + | |
+ | /* 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 { | .header-contact { | ||
text-align: center; | text-align: center; | ||
Line 794: | Line 1,278: | ||
.navbar-main #navbar a { | .navbar-main #navbar a { | ||
border-bottom: none; | border-bottom: none; | ||
+ | padding: 5px; | ||
} | } | ||
.navbar-main .navbar-brand { | .navbar-main .navbar-brand { | ||
− | padding: 6px | + | padding: 6px; |
} | } | ||
.navbar-main .submenu { | .navbar-main .submenu { | ||
Line 812: | Line 1,297: | ||
.navbar-main li:focus .submenu li { | .navbar-main li:focus .submenu li { | ||
border-top-color: #119ED8; | 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 { | .carousel-home .carousel-title { | ||
− | font-size: | + | font-size: 18px; |
+ | margin-left: -50px; | ||
} | } | ||
+ | .analysis img{ | ||
+ | width:100%;} | ||
.carousel-home .carousel-subtitle { | .carousel-home .carousel-subtitle { | ||
font-size: 16px; | 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- | + | |
− | + | ||
− | + | ||
} | } | ||
+ | .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) */ | /* Extra Small devices (tablets, 480px and Down) */ | ||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
+ | .title-style-1 { | ||
+ | font-size:30px;} | ||
+ | |||
+ | #delft .bmc p{ | ||
+ | font-size: 10px; | ||
+ | } | ||
.carousel-home .carousel-title { | .carousel-home .carousel-title { | ||
font-size: 16px; | font-size: 16px; | ||
− | margin: | + | margin-left: -50px; |
} | } | ||
.carousel-home .carousel-subtitle { | .carousel-home .carousel-subtitle { | ||
font-size: 14px; | font-size: 14px; | ||
− | margin: | + | margin-left: -50px; |
} | } | ||
+ | .carousel-home .carousel-subsubtitle{ | ||
+ | font-size: 8px; | ||
+ | margin-left:-50px; | ||
+ | } | ||
.carousel-home .carousel-indicators { | .carousel-home .carousel-indicators { | ||
bottom: 0; | bottom: 0; | ||
} | } | ||
+ | .carousel-home .carousel-caption { | ||
+ | margin-left:20px; | ||
+ | } | ||
+ | |||
+ | .igemlogo img{ | ||
+ | width: 30px;} | ||
+ | .didyouknow img{ | ||
+ | visibility: hidden;} | ||
+ | |||
+ | .logo img{ | ||
+ | height: 40px;} | ||
} | } | ||
/* ============================================================================= | /* ============================================================================= | ||
Line 1,039: | Line 1,582: | ||
-webkit-animation-name: zoomIn; | -webkit-animation-name: zoomIn; | ||
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%; | ||
} | } |
Latest revision as of 13:07, 27 November 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%; }