Template:Bristol/css/style

/* Fix for random black bar at top :D*/

1. content .mw-content-ltr > p {

 margin: 0;

}

1. content .igem-logo {

 position: absolute;
 top: 20px;
 right: 20px;
 width: 10vw;
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
 filter: gray; /* IE6-9 */
 -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
 opacity: 0.5;

}

1. content .igem-logo img {

 max-width: 100%;

}

1. content .team {

 text-align: center;
 width: 100%;

}

1. content .smallheadshot {

 text-align: center;
 height: 20vh;
 margin-top: 20px;
 border-radius: 100%;

}

1. content .people {

 overflow: hidden;

}

1. content .notebook {

}

1. content .notebook img {

 height: 20vh;
 padding: 20px;

}

1. content .notebook h2 {

 font-size: 3rem;

}

1. content .notebook li {

 border: none;
 font-size: 1.3rem;
 font-weight: 300;

}

1. content .notebookicon {

 text-align: center;

}

1. content .banner {

 color: #ffffff;
 text-shadow: 2px 2px  #9e9e9e;
 position: relative;
 overflow-x: hidden;
 text-align: center;
 min-height: 100vh;
 width: 100%;
 background: #69C5D6; /* For browsers that do not support gradients */
 background: -webkit-linear-gradient(#69C5D6 90%, #ffffff); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(#69C5D6 90%, #ffffff); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#69C5D6 90%, #ffffff); /* For Firefox 3.6 to 15 */
 background: linear-gradient(#69C5D6 90%, #ffffff); /* Standard syntax */

}

1. content .banner-img {

 position: relative;
 /*margin-top: 30vh;
 transform: translateY(-30%);*/

}

1. content .banner-img > img {

 max-height: 80vh;
 max-width: 80vw;
 height: auto;

}

1. content .banner-sm {

 width: 100%;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
 overflow: hidden;
 min-height: 20vh;

}

1. content .banner-text-sm {

 text-align: center;
 position: relative;
 margin-top: 10vh;
 transform: translateY(-10%);

}

1. content .banner-text-sm > h1 {

 font-size: 5rem;

}

1. content .banner-text-sm > p {

 text-align: center;
 font-size: 2rem;
 font-weight: 300;

}

1. content .background h2 {

 text-align: center;
 padding: 0px 15px 0px 15px;

}

1. content .background p {

 font-size: 1.25rem;
 font-weight: 300;

}

1. content .background img {

 width: 100%;
 padding: 20px 0px 20px 0px;

}

1. content .pod img {

 width: 100%;
 padding-top: 20px;

}

1. content .footer {

 background: #F7F7F7;
 margin-top: 50px;
 padding-left: 50px;
 padding-right: 50px;
 padding-top: 20px;

}

1. content .footer h4 {

 text-align: center;
 font-weight: 400;

}

1. content .footer h5 {

 text-align: center;
 font-weight: 400;

}

1. content .footer h6 {

 text-align: center;
 font-weight: 300;

}

1. content .footer a {

 color: inherit;

}

1. content .footer a:hover {

 color: inherit;

}

1. content footer p {

 text-align: center;
 margin: 0 !important;
 padding-bottom: 16px;

}

1. content .footer-social {

 width: 100%;
 text-align: center;

}

1. content .footer-social img {

 width: 80px;
 padding: 20px;
 text-shadow:

}

1. content .footer-team {

 text-align: center;

}

1. content .footer-team img {

 height: 150px;
 width: 150px;

}

1. content .sponsor {

 text-align: center;
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
 filter: gray; /* IE6-9 */
 -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */

}

1. content .sponsor p {

 text-align: center;
 color: #fff;

}

1. content .sponsor img {

 margin: 20px;
 width: 150px;

}

1. content .sponsor:hover {

 filter: none;
 -webkit-filter: grayscale(0%);

}

1. content .reactor-animation {

 position: relative;
 overflow-x: hidden;
 min-height: 200px;

}

1. content .reactor {

 position: absolute;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 transform: translate(-50%, -50%);
 background-color: #bbbbbb;
 border-radius: 5px;

}

1. content .reactor div{

 margin-top: 50%;
 transform: translateY(-50%);
 text-align: center;
 font-size: 4rem;
 color: #ffffff

}

1. content .reactant {

 position: absolute;
 width: 70px;
 height: 70px;
 border-radius: 70px;
 top: 50%;
 transform: translate(50%, -50%);

 animation: reactant-animate 3s linear infinite;

}

1. content .reactant::after {

 position: relative;
 top: 15%;
 text-align: center;
 font-size: 2rem;
 color: #ffffff;
 transform: translate(-50%);
 animation: reactant-after-animate 3s linear infinite;
 content: "";

}

1. content .reactant:nth-child(2) {

 top: 20%;
 animation: reactant-animate -3s 5s linear infinite;

}

1. content .reactant:nth-child(3) {

 top: 60%;
 animation: reactant-animate -2s 4s linear infinite;

}

1. content .reactant:nth-child(4) {

 top: 80%;
 animation: reactant-animate -1s 6s linear infinite;

}

1. content .reactant:nth-child(2)::after {

 animation: reactant-after-animate -3s 5s linear infinite;

}

1. content .reactant:nth-child(3)::after {

 animation: reactant-after-animate -2s 4s linear infinite;

}

1. content .reactant:nth-child(4)::after {

 animation: reactant-after-animate -1s 6s linear infinite;

}

@keyframes reactant-animate {

 0% {
   background-color: #0000bb;
   right: 100%;
   opacity: 0;
 }

 10% {
   right: 90%;
   opacity: 1;
 }

 49% {
   background-color: #0000bb;
   right: 50%;
   opacity: 1;
 }

 51% {
   background-color: #00bb00;
   right: 50%;
   opacity: 1;
 }

 90% {
   right: 10%;
   opacity: 1;
 }

 100% {
   background-color: #00bb00;
   right: 0%;
   opacity: 0;
 }

}

@keyframes reactant-after-animate {

 0%{
   content: "NOx";
 }
 49%{
   content: "NOx";
 }
 50% {
   content: "NH4";
 }
 100% {
   content: "NH4";
 }

}

1. content .x1 {

-webkit-animation: animateCloud -9s 20s linear infinite; -moz-animation: animateCloud -9s 20s linear infinite;

 -o-animation: animateCloud -9s 20s linear infinite;

animation: animateCloud -9s 20s linear infinite;

-webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3);

 position: absolute;
 top: 5%;
 z-index: 2;

}

1. content .x2 {

-webkit-animation: animateCloud -15s 35s linear infinite; -moz-animation: animateCloud -15s 35s linear infinite;

 -o-animation: animateCloud -15s 35s linear infinite;

animation: animateCloud -15s 35s linear infinite;

-webkit-transform: scale(0.65); -moz-transform: scale(0.65); transform: scale(0.65);

 position: absolute;
 top: 20%;
 z-index: 2;

}

1. content .x3 {

-webkit-animation: animateCloud -25s 30s linear infinite; -moz-animation: animateCloud -25s 30s linear infinite;

 -o-animation: animateCloud -25s 30s linear infinite;

animation: animateCloud -25s 30s linear infinite;

-webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5);

 position: absolute;
 top: 35%;
 z-index: 2;

}

1. content .x4 {

-webkit-animation: animateCloud -5s 18s linear infinite; -moz-animation: animateCloud -5s 18s linear infinite;

 -o-animation: animateCloud -5s 18s linear infinite;

animation: animateCloud -5s 18s linear infinite;

-webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4);

 position: absolute;
 top: 45%;
 z-index: 2;

}

1. content .x5 {

-webkit-animation: animateCloud -18s 25s linear infinite; -moz-animation: animateCloud -18s 25s linear infinite;

 -o-animation: animateCloud -18s 25s linear infinite;

animation: animateCloud -18s 25s linear infinite;

-webkit-transform: scale(0.55); -moz-transform: scale(0.55); transform: scale(0.55);

 position: absolute;
 top: 60%;
 z-index: 2;

}

1. content .cloud {

background: #fff; background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -webkit-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: linear-gradient(top, #fff 5%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );

-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;

-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

height: 120px; position: relative; width: 350px; }

1. content .cloud:after, .cloud:before {

 background: #fff;
 content: ;
 position: absolute;

z-indeX: -1; }

1. content .cloud:after {

-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;

height: 100px; left: 50px; top: -50px; width: 100px; }

1. content .cloud:before {

-webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px;

width: 180px; height: 180px; right: 50px; top: -90px; }

@keyframes animateCloud {

 0% {
   left: -1000px;
 }
 100% {
   left: 100%;
 }

}

1. content .fadeIn {

}

1. content .fadeIn.Up, .fadeIn .Up {

 opacity: 0;
 transition: all 500ms ease-in;
 transform: translateY(5vh);

}

1. content .fadedIn.Up, .fadedIn .Up {

 opacity: 1;
 transform: translateY(0);

}

1. content .fadeIn.Down, .fadeIn .Down {

 opacity: 0;
 transition: all 500ms ease-in;
 transform: translateY(-5vh);

}

1. content .fadedIn.Down, .fadedIn .Down {

 opacity: 1;
 transform: translateY(0);

}

1. content .fadeIn.Left, .fadeIn .Left {

 opacity: 0;
 transition: all 500ms ease-in;
 transform: translateX(-10vw);

}

1. content .fadedIn.Left, .fadedIn .Left {

 opacity: 1;
 transform: translateX(0);

}

1. content .fadeIn.Right, .fadeIn .Right {

 opacity: 0;
 transition: all 500ms ease-in;
 transform: translateX(10vw);

}

1. content .fadedIn.Right, .fadedIn .Right {

 opacity: 1;
 transform: translateX(0);

}

1. content .fadeIn.Pop, .fadeIn .Pop {

 opacity: 0;
 transition: all 700ms ease-in;

}

1. content .fadedIn.Pop, .fadedIn .Pop {

 opacity: 1;
 animation: fadeInPop 700ms linear;

}

@keyframes fadeInPop {

 0% {
   transform: scale(0);
 }
 80% {
   transform: scale(1.1);
 }
 100% {
   transform: scale(1);
 }

}

/* Featurettes

---

*/

1. content .featurette-divider {

margin: 5rem 0; /* Space out the Bootstrap

---

more */

}

/* Thin out the marketing headings */

1. content .featurette-heading {

 font-weight: 300;
 line-height: 1;
 letter-spacing: -.05rem;

}

1. content .featurette-image {

 border-radius: 100%;
 width: 100%;
 height: auto;

}

/* Remove bootstrap dropdown caret */

1. content .dropdown-toggle::after {

   display:none

}

/* Bootstrap dropdown on hover*/ @media (min-width: 992px) {

 #content .dropdown:hover .dropdown-menu {
   display: block;
   margin-top: 0;
   animation: fadeInPop 100ms linear;
 }

}

/* RESPONSIVE CSS

---

*/

@media (min-width: 40em) {

 /* Bump up size of carousel content */
 #content .carousel-caption p {
   margin-bottom: 1.25rem;
   font-size: 1.25rem;
   line-height: 1.4;
 }

 #content .featurette-heading {
   font-size: 50px;
 }

}

@media (min-width: 62em) {

 #content .featurette-heading {
   margin-top: 7rem;
 }

}