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 .people a {

 color: inherit;

}

1. content .people a:hover {

 color: inherit;
 text-decoration: none;

}

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 80%, #ffffff);
 /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(#69C5D6 80%, #ffffff);
 /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#69C5D6 80%, #ffffff);
 /* For Firefox 3.6 to 15 */
 background: linear-gradient(#69C5D6 80%, #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 .centreimage {

 vertical-align: middle;
 display: block;
 margin-left: auto;
 margin-right: auto;

}

1. content .centrevid {

 display: block;
 margin: 0 auto;
 width: 840;

}

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 {

 margin: 40px 0px 40px 0px;

}

1. content .background h2 {

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

}

1. content .background p {

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

}

1. content .background {}

1. content .background img {

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

}

1. content .medal-img {

 width: 100%;

}

1. content .medal-title {

 font-size: 5rem;
 font-weight: 300;
 margin-bottom: 20px;

}

1. content .medal-link {

 transition: all .2s ease-in-out;

}

1. content .medal-link:hover {

 transform: scale(1.1);

}

1. content .medal-link>a {

 text-decoration: none;

}

1. content .medals {

 text-align: center;

}

1. content .medal-bronze {

 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #cd7f32;
 border-radius: 20px;
 padding: 10px;
 width: 100%;

}

1. content .medal-silver {

 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #c0c0c0;
 border-radius: 20px;
 padding: 10px;

}

1. content .medal-gold {

 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #daa520;
 border-radius: 20px;
 padding: 10px;

}

1. content .model-button {

 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;
 width: 100%;

}

1. content .design-button {

 text-align: center;
 font-size: 2rem;
 font-weight: 300;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;
 width: 100%;

}

1. content .engagement-button {

 text-align: center;
 font-size: 1.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;
 width: 100%;

}

1. content .award {

 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;

}

1. content .parts {

 margin-top: 50px;
 margin-bottom: 50px;

}

1. content .parts h3 {

 text-align: center;
 font-size: 1.25rem;
 font-weight: 400;

}

1. content .parts p {

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

}

1. content .parts img {

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

}

1. content .protocol {}

1. content .protocol img {

 height: 20vh;
 padding: 20px;

}

1. content .protocol h2 {

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

}

1. content .protocol li {

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

}

1. content .btn-protocol {

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

}

1. content .pod img {

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

}

.rotate90 {

 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 transform: rotate(90deg);

}

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;
 text-decoration: none;

}

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;

}

1. content .sponsor h2 {

 text-align: left;

}

1. content .sponsor img {

 margin: 20px;
 width: 150px;
 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 img:hover {

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

}

1. content .sponsor a {

 color: inherit;

}

1. content .sponsor a:hover {

 color: inherit;
 text-decoration: none;

}

1. content .table-bristol>thead>tr>th {

 background-color: #69c5d6;

}

1. content .navibtn {

 text-align: center;
 background-color: #69c5d6;
 border-radius: 10px;
 padding: 10px;
 margin: 20px;

}

1. content .navibtn p {

 font-size: 1.5rem;
 font-weight: 500;
 color: #fff;

}

1. content .requirement {

 text-align: center;
 font-size: 1.5rem;
 font-weight: 500;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;

}

1. content .solution {

 text-align: center;
 font-size: 1.5rem;
 font-weight: 500;
 color: #fff;
 background-color: #51c05e;
 border-radius: 20px;
 padding: 10px;

}

1. content .reactor-animation {

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

}

1. content .reactor {

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

}

1. content .reactor img {

 position: absolute;
 top: 50%;
 left: 50%;
 width: auto;
 height: 400px;
 transform: translate(-50%, -50%);

}

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: 40%;
 transform: translate(50%, -50%);
 animation: reactant-animate 3s linear infinite;

}

1. content .reactant::after {

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

}

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

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

}

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

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

}

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

 top: 60%;
 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);
 }

}

/* Over ride carousel */

1. content .img-fluid {

 width: 100%;
 height: 100%;
 border-radius: 20px;

}

1. content .img-fluid-edit {

 width: 80%;
 height: 80%;
 border-radius: 20px;
 display: block;
 margin-left: auto;
 margin-right: auto;

}

1. content .img-fluid-small {

 width: 50%;
 height: 50%;
 border-radius: 20px;
 display: block;
 margin-left: auto;
 margin-right: auto;

}

1. content .img-fluid-portrait {

 width: 30%;
 height: 30%;
 border-radius: 20px;
 display: block;
 margin-left: auto;
 margin-right: auto;

}

1. content .carousel-control-next-icon {

 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");

}

1. content .carousel-control-prev-icon {

 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);

}

/* 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-subheading {

 font-weight: 300;
 font-size: 2.5rem;
 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) {

 #content .featurette-heading {
   font-size: 3.5rem;
 }

}

/* @media (min-width: 62em) {

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

}*/