Difference between revisions of "Team:NKU CHINA/interlab"

Line 34: Line 34:
 
         <link rel="stylesheet" href="css/owl-carousel.css">
 
         <link rel="stylesheet" href="css/owl-carousel.css">
 
         <style type="text/css">
 
         <style type="text/css">
 +
 +
 +
* {
 +
    margin: 0;
 +
    padding: 0;
 +
    font-family: 'Source Sans Pro', sans-serif;
 +
    outline: none!important;
 +
}
 +
 +
a {
 +
  text-decoration: none!important;
 +
}
 +
 +
body {
 +
  overflow-x: hidden;
 +
}
 +
 +
ul {
 +
  list-style: none;
 +
  margin: 0px;
 +
}
 +
 +
p {
 +
  font-size: 16px;
 +
  line-height: 26px;
 +
  letter-spacing: 0.25px;
 +
  font-weight: 300;
 +
}
 +
 +
.col-xs-15,
 +
.col-sm-15,
 +
.col-md-15,
 +
.col-lg-15 {
 +
    position: relative;
 +
    min-height: 1px;
 +
    padding-right: 10px;
 +
    padding-left: 10px;
 +
}
 +
 +
.col-xs-15 {
 +
    width: 20%;
 +
    float: left;
 +
}
 +
 +
@media (min-width: 768px) {
 +
.col-sm-15 {
 +
        width: 20%;
 +
        float: left;
 +
    }
 +
}
 +
 +
@media (min-width: 992px) {
 +
    .col-md-15 {
 +
        width: 20%;
 +
        float: left;
 +
    }
 +
}
 +
 +
@media (min-width: 1200px) {
 +
    .col-lg-15 {
 +
        width: 20%;
 +
        float: left;
 +
    }
 +
}
 +
 +
.primary-button a {
 +
  padding: 13px 20px;
 +
  letter-spacing: 0.5px;
 +
  background-color: #46bae2;
 +
  color: #fff;
 +
  text-transform: uppercase;
 +
  font-size: 13px;
 +
  font-weight: 700;
 +
  text-decoration: none;
 +
}
 +
 +
.secondary-button a {
 +
  padding: 13px 20px;
 +
  letter-spacing: 0.5px;
 +
  background-color: #f2745f;
 +
  color: #fff;
 +
  text-transform: uppercase;
 +
  font-size: 13px;
 +
  font-weight: 700;
 +
  text-decoration: none;
 +
}
 +
 +
.border-button a {
 +
  padding: 13px 20px;
 +
  letter-spacing: 0.5px;
 +
  background-color: transparent;
 +
  border: 1px solid #fff;
 +
  color: #fff;
 +
  text-transform: uppercase;
 +
  font-size: 13px;
 +
  font-weight: 700;
 +
  text-decoration: none;
 +
}
 +
 +
 +
.section-heading {
 +
  text-align: center;
 +
  margin-top: 80px;
 +
  margin-bottom: 60px;
 +
}
 +
 +
.section-heading h4 {
 +
  margin-top: 0px;
 +
  font-size: 28px;
 +
  text-transform: uppercase;
 +
  font-weight: 300;
 +
  color: #121212;
 +
}
 +
.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
 +
.section-heading p {
 +
  color: #7a7a7a;
 +
  padding: 0px 25%;
 +
}
 +
 +
.navbar-inverse {
 +
  background-color: #fff;
 +
  border: none;
 +
}
 +
 +
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
 +
  background-color: #f2745f;
 +
}
 +
 +
.main-header {
 +
  position: fixed;
 +
  width: 100%;
 +
  height: 80px;
 +
  margin: 0 auto;
 +
  z-index: 1000;
 +
  top: 30px;
 +
  -webkit-transition: all 150ms ease-in-out;
 +
  -moz-transition: all 150ms ease-in-out;
 +
  transition: all 150ms ease-in-out;
 +
}
 +
 +
.navbar {
 +
  margin-bottom: 0px;
 +
}
 +
 +
.navbar-header {
 +
  float: none;
 +
}
 +
 +
.scrolled {
 +
  position: fixed;
 +
  left: 0;
 +
  top: 0;
 +
  -webkit-transition: all 150ms ease-in-out;
 +
  -moz-transition: all 150ms ease-in-out;
 +
  transition: all 150ms ease-in-out;
 +
}
 +
 +
#menu-wrapper {
 +
  background-color: white;
 +
  overflow: hidden;
 +
  -moz-box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.07);
 +
  -webkit-box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.07);
 +
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.07);
 +
}
 +
 +
.navbar-brand {
 +
  font-family: 'Open Sans', sans-serif;
 +
  font-size: 26px;
 +
  line-height: 50px;
 +
  font-weight: 900;
 +
  text-transform: uppercase;
 +
  color: #46bae2!important;
 +
  transition: all 0.5s;
 +
  margin-left: 30px;
 +
}
 +
 +
.menu-first ul li {
 +
  display: inline-block;
 +
  margin: 0px;
 +
}
 +
.menu-first ul li:last-child {
 +
  margin-right: 60px!important;
 +
}
 +
.menu-first {
 +
  float: right;
 +
  margin-left:
 +
}
 +
.menu-first li a {
 +
  color: #7a7a7a;
 +
  font-size: 14px;
 +
  font-weight: 300;
 +
  text-transform: uppercase;
 +
  text-shadow: none;
 +
  display: inline-block;
 +
  line-height: 80px;
 +
  padding: 0px 20px;
 +
  letter-spacing: 0.5px;
 +
  transition: all 0.5s;
 +
  outline: none;
 +
}
 +
.menu-first ul li.active a {
 +
  color: #fff;
 +
  background-color: #f2745f;
 +
}
 +
 +
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
 +
  color: #7a7a7a;
 +
}
 +
 +
.navbar-inverse .navbar-toggle {
 +
  border-color: #f2745f;
 +
  background-color: #f2745f;
 +
  right: 15px;
 +
}
 +
 +
.banner {
 +
  background-image: url(../img/banner-bg.jpg);
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 +
  background-position: center center;
 +
}
 +
 +
.banner-content {
 +
  text-align: center;
 +
  padding: 280px 0px 200px 0px;
 +
}
 +
 +
.banner-content h6 {
 +
  font-size: 18px;
 +
  color: #fff;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
  letter-spacing: 2px;
 +
  margin-bottom: 5px;
 +
}
 +
 +
.banner-content h2 {
 +
  font-size: 80px;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
  color: #fff;
 +
  letter-spacing: 2px;
 +
  margin-top: 0px;
 +
  margin-bottom: 30px;
 +
}
 +
 +
.banner-content ul {
 +
  padding: 0;
 +
  margin: 0;
 +
  list-style: none;
 +
}
 +
 +
.banner-content ul li {
 +
  display: inline-block;
 +
  margin: 10px;
 +
}
 +
 +
 +
.intro {
 +
  background-color: #46bae2;
 +
  text-align: center;
 +
  padding: 80px 0px;
 +
}
 +
 +
.intro h4 {
 +
  margin-top: 0px;
 +
  font-size: 44px;
 +
  font-weight: 300;
 +
  color: #fff;
 +
}
 +
 +
.intro h6 {
 +
  margin-top: 15px;
 +
  font-size: 17px;
 +
  font-weight: 700;
 +
  color: #fff;
 +
  letter-spacing: 1px;
 +
}
 +
 +
.intro .border-button {
 +
  margin-top: 45px;
 +
}
 +
 +
 +
 +
#about {
 +
  padding: 0px;
 +
  background-image: url(../img/services-bg.jpg);
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 +
  background-position: center center;
 +
  background-attachment: fixed;
 +
}
 +
 +
#about .service-item {
 +
  text-align: center;
 +
  margin: 0px -15px;
 +
  padding: 120px 45px;
 +
}
 +
 +
#about .service-item h4 {
 +
  margin-top: 45px;
 +
  margin-bottom: 20px;
 +
  font-size: 22px;
 +
  font-weight: 700;
 +
  color: #fff;
 +
  text-transform: uppercase;
 +
}
 +
 +
#about .service-item p {
 +
  margin-bottom: 0px;
 +
  color: #fff;
 +
}
 +
 +
#about .first-service {
 +
  background-color: rgba(242, 116, 95, 0.75);
 +
}
 +
 +
#about .second-service {
 +
  background-color: rgba(54, 62, 80, 0.75);
 +
}
 +
 +
#about .third-service {
 +
  background-color: rgba(70, 186, 226, 0.75);
 +
}
 +
 +
#about .service-item .icon {
 +
  width: 70px;
 +
  height: 70px;
 +
  display: inline-block;
 +
  text-align: center;
 +
  line-height: 74px;
 +
  background-color: transparent;
 +
}
 +
 +
 +
 +
 +
.what-we-do {
 +
  background-color: #fff;
 +
  padding-bottom: 80px;
 +
}
 +
 +
.what-we-do .tabs li a {
 +
  text-decoration: none;
 +
  color: #121212;
 +
}
 +
 +
.what-we-do .tabs .active .list-item {
 +
  background-color: #f2745f!important;
 +
  color: #fff!important;
 +
}
 +
 +
.what-we-do .tabs .active .list-item .icon {
 +
  background-color: #fff;
 +
}
 +
 +
.what-we-do .list-item {
 +
  background-color: #f4f4f4;
 +
  text-align: center;
 +
  padding: 40px 0px;
 +
  margin: 15px 0px;
 +
  transition: all 0.5s;
 +
}
 +
 +
.what-we-do .list-item .icon {
 +
  width: 90px;
 +
  height: 90px;
 +
  border-radius: 50%;
 +
  display: inline-block;
 +
  text-align: center;
 +
  line-height: 90px;
 +
  background-color: transparent;
 +
}
 +
 +
.what-we-do .list-item h4 {
 +
  margin-top: 20px;
 +
  margin-bottom: 0px;
 +
  font-size: 17px;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
}
 +
 +
.what-we-do .tab-content-services {
 +
  margin-top: 60px;
 +
}
 +
 +
.what-we-do .tab-content-services .right-image img {
 +
  width: 100%;
 +
  overflow: hidden;
 +
}
 +
 +
.what-we-do .tab-content-services .left-text h4 {
 +
  font-size: 22px;
 +
  text-transform: uppercase;
 +
  font-weight: 700;
 +
  margin-top: 0px;
 +
  margin-bottom: 20px;
 +
}
 +
 +
.what-we-do .tab-content-services .left-text p {
 +
  color: #7a7a7a;
 +
}
 +
 +
.what-we-do .tab-content-services .left-text .primary-button {
 +
  margin-top: 35px;
 +
  margin-bottom: 50px;
 +
}
 +
 +
 +
 +
 +
 +
#portfolio {
 +
  text-align: center;
 +
}
 +
 +
#portfolio .item {
 +
  margin: 0px 5px;
 +
}
 +
 +
.portfolio-section {
 +
  background-color: #363e50;
 +
  padding-bottom: 80px;
 +
}
 +
 +
#portfolio .section-heading h4 {
 +
  color: #fff;
 +
}
 +
 +
#portfolio .section-heading h5 {
 +
  font-size:19px;
 +
  color: #aaa;
 +
}
 +
 +
#portfolio .portfolio-item img {
 +
  max-width: 100%;
 +
  overflow: hidden;
 +
}
 +
 +
.owl-pagination {
 +
  margin-top: 30px;
 +
  opacity: 1;
 +
  display: inline-block;
 +
}
 +
 +
.owl-page span {
 +
  display: block;
 +
  width: 10px;
 +
  height: 10px;
 +
  margin: 0px 5px;
 +
  filter: alpha(opacity=50);
 +
  opacity: 0.5;
 +
  -webkit-border-radius: 20px;
 +
  -moz-border-radius: 20px;
 +
  border-radius: 20px;
 +
  background: #46bae2;
 +
}
 +
 +
 +
 +
#blog {
 +
  background-color: #f4f4f4;
 +
}
 +
 +
#blog .section-heading {
 +
  text-align: center;
 +
}
 +
 +
.wrapper {
 +
  text-align: left;
 +
}
 +
 +
#blog .tabs {
 +
  list-style: none;
 +
  margin-top: 0px;
 +
}
 +
 +
#blog .tabs li {
 +
  display: block;
 +
  text-align: left;
 +
  margin-bottom: 29px;
 +
}
 +
 +
#blog .tabs a {
 +
  display:block;
 +
  text-align: left;
 +
  text-decoration:none;
 +
  text-transform: uppercase;
 +
  letter-spacing: 0.5px;
 +
  color:#121212;
 +
  font-size: 20px;
 +
  font-weight: 700;
 +
  padding: 24px 25px;
 +
  background-color: #fff;
 +
  transition: all 0.3s;
 +
  box-shadow: 0px 0px 10px #cdcdcd;
 +
}
 +
 +
#blog .tabs .active {
 +
  background-color: #46bae2;
 +
  color: #fff!important;
 +
}
 +
#blog .tabs .active .info-post li {
 +
  color: #fff!important;
 +
}
 +
#blog .tabs .active .info-post li i {
 +
  color: #fff!important;
 +
}
 +
#first-tab-group {
 +
  margin-top: 0px;
 +
  margin-bottom: 15px;
 +
}
 +
#first-tab-group img {
 +
  width: 100%;
 +
  overflow: hidden;
 +
}
 +
.tabgroup .text-content  {
 +
  background-color: #fff;
 +
  color: #fff;
 +
  padding: 25px;
 +
  text-align: left;
 +
  margin-top: -10px;
 +
  margin-left: 10px;
 +
  margin-right: 10px;
 +
  position: relative;
 +
  box-shadow: 0px 0px 10px #cdcdcd;
 +
}
 +
.tabgroup .text-content h4 {
 +
  font-size: 20px;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
  letter-spacing: 0.5px;
 +
  color: #121212;
 +
  margin-top: 0px;
 +
  margin-bottom: 15px;
 +
}
 +
.tabgroup .text-content span {
 +
  font-size: 13px;
 +
  color: #33c1cf;
 +
}
 +
.tabgroup .text-content a {
 +
  font-size: 13px;
 +
  color: #33c1cf;
 +
  text-decoration: none;
 +
}
 +
.tabgroup .text-content p {
 +
  margin-top: 17px;
 +
  color: #7a7a7a;
 +
}
 +
 +
.tabgroup .text-content .primary-button {
 +
  margin-bottom: 15px;
 +
  margin-top: 30px;
 +
}
 +
 +
.tabgroup .text-content .primary-button a {
 +
  color: #fff;
 +
}
 +
 +
.clearfix:after {
 +
  content:"";
 +
  display:table;
 +
  clear:both;
 +
}
 +
 +
#blog {
 +
  padding-bottom: 80px;
 +
}
 +
 +
#blog .info-post li {
 +
  display: inline;
 +
  margin-right: 15px;
 +
}
 +
 +
#blog .info-post li {
 +
  color: #343434;
 +
  font-size: 15px;
 +
  font-weight: 300;
 +
  text-transform: capitalize;
 +
}
 +
 +
#blog .info-post li i {
 +
  color: #46bae2;
 +
  margin-right: 5px;
 +
}
 +
 +
 +
 +
 +
#contact-us {
 +
  background-color: #fff;
 +
  text-align: left;
 +
  padding-bottom: 100px;
 +
}
 +
 +
#contact-us .section-heading {
 +
  color: #121212;
 +
}
 +
 +
 +
#contact-us .pop-button {
 +
  margin-top: 30px;
 +
}
 +
 +
#contact input {
 +
  border-radius: 0px;
 +
  padding-left: 15px;
 +
  font-size: 15px;
 +
  font-weight: 300;
 +
  color: #7a7a7a;
 +
  background-color: rgba(0, 0, 0, 0.03);
 +
  outline: none;
 +
  border: none;
 +
  box-shadow: none;
 +
  line-height: 50px;
 +
  height: 50px;
 +
  width: 100%;
 +
  margin-bottom: 30px;
 +
}
 +
 +
#contact textarea {
 +
  border-radius: 0px;
 +
  padding-left: 15px;
 +
  padding-top: 10px;
 +
  font-size: 15px;
 +
  font-weight: 300;
 +
  color: #232323;
 +
  background-color: rgba(0, 0, 0, 0.03);
 +
  outline: none;
 +
  border: none;
 +
  box-shadow: none;
 +
  height: 165px;
 +
  max-height: 220px;
 +
  width: 100%;
 +
  max-width: 100%;
 +
  margin-bottom: 25px;
 +
}
 +
 +
#contact button {
 +
    padding: 13px 20px;
 +
  letter-spacing: 0.5px;
 +
  background-color: #46bae2;
 +
  color: #fff;
 +
  text-transform: uppercase;
 +
  font-size: 13px;
 +
  font-weight: 700;
 +
  text-decoration: none;
 +
  border-radius: 0px;
 +
}
 +
 +
 +
 +
footer {
 +
  background-color: #363e50;
 +
  padding: 0px 0px;
 +
}
 +
 +
footer p {
 +
  font-size: 25px;
 +
  text-transform: uppercase;
 +
  color: #fff;
 +
  margin-bottom: 0px;
 +
  padding: 75px 0px;
 +
}
 +
 +
footer img {
 +
  width:auto;
 +
  height:auto;
 +
}
 +
footer a {
 +
  color: #9CF;
 +
}
 +
 +
footer a:hover {
 +
  color: #FC6;
 +
}
 +
 +
footer .social-icons {
 +
  text-align: center;
 +
  padding: 77px 0px;
 +
  margin: 0px;
 +
}
 +
 +
footer .social-icons li {
 +
  display: inline;
 +
  margin: 0px 10px;
 +
}
 +
 +
footer .social-icons a {
 +
  color: #a3afc9;
 +
  font-size: 14px;
 +
  text-transform: uppercase;
 +
  font-weight: 700;
 +
  text-decoration: none;
 +
  letter-spacing: 0.3px;
 +
  transition: all 0.5s;
 +
}
 +
 +
footer .social-icons a:hover {
 +
  color: #46bae2;
 +
}
 +
 +
footer .back-to-top a {
 +
  text-align: center;
 +
  background-color: #46bae2;
 +
  display: inline-block;
 +
  width: 100%;
 +
  padding: 60px 0px;
 +
  color: #fff;
 +
  font-size: 15px;
 +
  text-transform: uppercase;
 +
  font-weight: 700;
 +
  text-decoration: none;
 +
  letter-spacing: 1px;
 +
}
 +
 +
footer .back-to-top i {
 +
  display: block;
 +
  font-size: 36px;
 +
}
 +
 +
 +
 +
/* RESPONSIVE */
 +
 +
@media (max-width: 991px){
 +
  footer {
 +
    text-align: center;
 +
  }
 +
 +
  footer p {
 +
    padding: 30px 0px 0px 0px;
 +
  }
 +
 +
  footer .social-icons {
 +
    padding: 30px 0px 30px 0px;
 +
  }
 +
 +
  footer .back-to-top a {
 +
    padding: 30px 0px;
 +
  }
 +
 +
}
 +
 +
@media (max-width: 767px){
 +
 +
  .navbar-brand {
 +
    float: none;
 +
  }
 +
 
 +
  .menu-first {
 +
    margin: 0px;
 +
    padding: 0px;
 +
    width: 100%;
 +
    text-align: center;
 +
    float: none;
 +
  }
 +
 +
  .menu-first li:first-child {
 +
    border-top: 1px solid #eee;
 +
  }
 +
 +
  .menu-first li {
 +
    border-bottom: 1px solid #eee;
 +
  }
 +
 +
  .menu-first li:last-child {
 +
    border-bottom: none;
 +
  }
 +
 +
  .menu-first li a {
 +
    width: 100%;
 +
    line-height: 50px;
 +
  }
 +
 +
  .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
 +
    border-color: transparent;
 +
  }
 +
 +
  .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
 +
    background-color: #f2745f;
 +
  }
 +
 
 +
 +
}
 +
 +
@media (max-width: 385px){
 +
 +
 
 +
 +
}
 +
 +
 +
 +
/* LIGHT BOX */
 +
 +
.slbOverlay, .slbWrapOuter, .slbWrap {
 +
 +
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
 +
 +
}
 +
 +
.slbOverlay {
 +
 +
    overflow: hidden; z-index: 2000; background-color: #000; opacity: 0.7; filter: alpha(opacity=70);
 +
    @include animation(slbOverlay 0.5s);
 +
 +
}
 +
 +
.slbWrapOuter {
 +
 +
    overflow-x: hidden; overflow-y: auto; z-index: 2010;
 +
 +
}
 +
 +
.slbWrap {
 +
 +
    position: absolute; text-align: center;
 +
 +
    &:before {
 +
 +
        content: ""; display: inline-block; height: 100%; vertical-align: middle;
 +
 +
    }
 +
 +
}
 +
 +
.slbContentOuter {
 +
 +
    position: relative; display: inline-block; vertical-align: middle; margin: 0px auto; padding: 0 1em; box-sizing: border-box; z-index: 2020; text-align: left;
 +
    max-width: 100%;
 +
 +
    .slbContentEl & {
 +
 +
        padding: 5em 1em;
 +
 +
    }
 +
 +
}
 +
 +
.slbContent {
 +
 +
    position: relative;
 +
 +
    .slbContentEl & {
 +
 +
        @include animation(slbEnter 0.3s); background-color: #fff; box-shadow: 0 0.2em 1em rgba(#000, 0.4);
 +
 +
    }
 +
 +
}
 +
 +
.slbImageWrap {
 +
 +
    @include animation(slbEnter 0.3s);
 +
    position: relative;
 +
 +
    &:after {
 +
 +
        content: ""; position: absolute; left: 0; right: 0; top: 5em; bottom: 5em; display: block; z-index: -1;
 +
        box-shadow: 0 0.2em 1em rgba(#000, 0.6); background-color: #FFF;
 +
 +
    }
 +
 +
}
 +
 +
.slbImage {
 +
 +
    width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 5em 0; margin: 0 auto;
 +
 +
}
 +
 +
.slbCaption {
 +
 +
    @include ellipsis;
 +
    font-size: 1.4em; position: absolute; left: 0; right: 0; bottom: 0; padding: em(10,14) 0;
 +
    color: #fff; color: rgba(#fff, 0.7); text-align: center;
 +
 +
}
 +
 +
.slbCloseBtn, .slbArrow {
 +
 +
    margin:0; padding: 0; border: 0; cursor: pointer; background: none;
 +
    &::-moz-focus-inner { padding: 0; border: 0; }
 +
 +
    &:hover { opacity: 0.5; }
 +
    &:active { opacity: 0.8; }
 +
 +
}
 +
 +
.slbCloseBtn {
 +
 +
  font-size: 36px;
 +
 +
    $size: 50; $iconSize: 30;
 +
 +
    @include animation(slbEnter 0.3s);
 +
 +
    font-size: em($iconSize,10); width: em($size,$iconSize); height: em($size,$iconSize); line-height: em($size,$iconSize);
 +
    position: absolute; right: em(-10,$iconSize); top: 0;
 +
    color: #fff; color: rgba(#fff, 0.7); text-align: center;
 +
 +
    .slbLoading & {
 +
 +
        display: none;
 +
 +
    }
 +
 +
}
 +
 +
.slbLoadingText {
 +
 +
    font-size: 1.4em; color: #fff; color: rgba(#fff,0.9);
 +
 +
}
 +
 +
.slbArrows {
 +
 +
    position: fixed; top: 50%; left: 0; right: 0;
 +
 +
    .slbLoading & {
 +
 +
        display: none;
 +
 +
    }
 +
 +
}
 +
 +
.slbArrow {
 +
 +
    $size: 50; $iconSize: 8;
 +
 +
    position: absolute; top: 50%; margin-top: em(-1*$size,10); width: em($size,10); height: em($size*2,10);
 +
    opacity: 0.7; text-indent: -999em; overflow: hidden;
 +
 +
    &:before {
 +
 +
        content: ""; position: absolute; top: 50%; left: 50%; margin: em(-$iconSize,10) 0 0 em(-$iconSize,10); border: em($iconSize,10) solid transparent;
 +
 +
    }
 +
 +
    &.next {
 +
 +
        right: 0; &:before { border-left-color: #fff; }
 +
 +
    }
 +
 +
    &.prev {
 +
 +
        left: 0; &:before { border-right-color: #fff;}
 +
 +
    }
 +
 +
}
 +
 +
.slbIframeCont {
 +
 +
    width: 80em; height: 0; overflow: hidden; padding-top: 56.25%; margin: 5em 0;
 +
 +
}
 +
 +
.slbIframe {
 +
 +
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
 +
    box-shadow: 0 0.2em 1em rgba(#000, 0.6); background: #000;
 +
 +
}
 +
 +
@include keyframes(slbOverlay) {
 +
    from { opacity: 0; }
 +
    to { opacity: 0.7; }
 +
}
 +
 +
@include keyframes(slbEnter) {
 +
    from { opacity: 0; @include transform(translate3d(0, -1em, 0)); }
 +
    to { opacity: 1; @include transform(translate3d(0, 0, 0)); }
 +
}
 
img.normal  
 
img.normal  
 
{
 
{

Revision as of 08:16, 25 July 2018

Overview

Discover More

Method And Materials

Discover More

Results

Discover More

Method And Materials

OD 600 Reference point

❏ Add 100μl LUDOX into wells A1, B1, C1, D1
❏ Add 100μl of dd H2O into wells A2, B2, C2, D2
❏ Measure absorbance at 600 nm of all samples in the measurement mode you plan to use for cell measurements
❏ Record the data in the table below or in your notebook
❏ Import data into Excel sheet provided (OD600 reference point tab)

Particle Standard Curve

❏ Obtain the tube labeled ”Silica Beads” from the InterLab test kit and vortex vigorously for 30 seconds.
❏ Immediately pipet 96 μL microspheres into a 1.5 mL eppendorf tube
❏ Add 904μL of ddH2O to the microspheres
❏ Vortex well. This is your Microsphere Stock Solution.
❏ Repeat dilution series for rows B, C, D
❏ Re-Mix (Pipette up and down) each row of plate immediately before putting in the plate reader
❏ Measure Abs600 of all samples in instrument
❏ Record the data in your notebook
❏ Import data into Excel sheet provided (particle standard curve tab)

Fluorescence standard curve

❏ Spin down fluorescein kit tube to make sure pellet is at the bottom of tube.
❏ Prepare 10x fluorescein stock solution (100 μM) by resuspending fluorescein in 1 mL of 1xPBS.
❏ Dilute the 10x fluorescein stock solution with 1xPBS to make a 1x fluorescein solution with concentration 10 μM: 100 μL of 10x fluorescein stock into 900 μL 1x PBS
❏ Add 100 μl of PBS into wells A2, B2, C2, D2....A12, B12, C12, D12
❏ Add 200 μl of fluorescein 1x stock solution into A1, B1, C1, D1
❏ Transfer 100 μl of fluorescein stock solution from A1 into A2.
❏ Mix A2 by pipetting up and down 3x and transfer 100 μl into A3…
❏ Mix A3 by pipetting up and down 3x and transfer 100 μl into A4...
❏ Mix A4 by pipetting up and down 3x and transfer 100 μl into A5...
❏ Mix A5 by pipetting up and down 3x and transfer 100 μl into A6...
❏ Mix A6 by pipetting up and down 3x and transfer 100 μl into A7...
❏ Mix A7 by pipetting up and down 3x and transfer 100 μl into A8...
❏ Mix A8 by pipetting up and down 3x and transfer 100 μl into A9...
❏ Mix A9 by pipetting up and down 3x and transfer 100 μl into A10...
❏ Mix A10 by pipetting up and down 3x and transfer 100 μl into A11...
❏ Mix A11 by pipetting up and down 3x and transfer 100 μl into liquid waste
❏ Repeat dilution series for rows B, C, D
❏ Measure fluorescence of all samples in instrument
❏ Record the data in your notebook
❏ Import data into Excel sheet provided (fluorescein standard curve tab)

Competent cells and Transformation

❏ Resuspend DNA in selected wells in the Distribution Kit with 10µl dH20.
❏ Thaw competent cells on ice
❏ Pipette 50µl of competent cells into 1.5ml tube
❏ Pipette 1µl of resuspended DNA into 1.5ml tube
❏ Pipette 1µl of control DNA into 2ml tube
❏ Close 1.5ml tubes, incubate on ice for 30min
❏ Heat shock tubes at 42°C for 45 sec
❏ Incubate on ice for 5min
❏ Pipette 950µl SOC media to each transformation
❏ Incubate at 37°C for 1 hours, shaking at 200-300rpm
❏ Pipette 100µL of each transformation onto petri plates
❏ Spin down cells at 6800g for 3mins and discard 800µL of the supernatant. Resuspend the cells in the remaining 100µL, and pipette each transformation onto petri plates
❏ Incubate transformations overnight (14-18hr) at 37°C
❏ Pick single colonies for PCR
❏ Count colonies for control transformation

Cell measurement

❏ Pick 2 colonies from each of the transformation plates and inoculate in 5-10 mL LB medium +Chloramphenicol. Grow the cells overnight (16-18 hours) at 37°C and 220 rpm
❏ Make a 1:10 dilution of each overnight culture in LB+Chloramphenicol (0.5mL of culture into 4.5mL of LB+Chlor)
❏ Measure Abs 600 of these 1:10 diluted cultures
❏ Record the data in your notebook
❏ Dilute the cultures further to a target Abs600 of 0.02 in a final volume of 12 ml LB medium + Chloramphenicol in 50 mL falcon tube (amber, or covered with foil to block light).
❏ Take 500 µL samples of the diluted cultures at 0 hours into 1.5 ml eppendorf tubes, prior to incubation. (At each time point 0 hours and 6 hours, you will take a sample from each of the 8 devices, two colonies per device, for a total of 16 eppendorf tubes with 500 µL samples per time point, 32 samples total). Place the samples on ice.
❏ Incubate the remainder of the cultures at 37°C and 220 rpm for 6 hours.
❏ Take 500 µL samples of the cultures at 6 hours of incubation into 1.5 ml eppendorf tubes. Place samples on ice.
❏ At the end of sampling point you need to measure your samples (Abs 600 and fluorescence measurement), see the below for details.
❏ Record data in your notebook
❏ Import data into Excel sheet provided (fluorescence measurement tab)

CFU per 0.1 OD600 E. coli cultures

❏ culture colonies for two Positive Control (BBa_I20270) cultures and your two Negative Control (BBa_R0040) cultures for 16-18 hours
❏ Dilute the overnight culture to OD600 = 0.1 in 1mL of LB + Cam media. Do this in triplicate for each culture. Check the OD600 and make sure it is 0.1
❏ Aseptically spead plate 100 μL on LB + Cam plates for those Final Dilution Factor is 8 x 104 or 8 x 105 or 8 x 106
❏ Incubate at 37°C overnight and count colonies after 18-20 hours of growth
❏ Count the colonies on each plate with fewer than 300 colonies. Multiple the colony count by the Final Dilution Factor on each plate.

HD Images

Competent cells (Escherichia coli strain DH5α)
1ml LUDOX CL-X (provided in kit)
300 μL Silica beads - Microsphere suspension (provided in kit, 4.7 x 10^8 microspheres)
LB (Luria Bertani) media
Fluorescein (provided in kit)
10ml 1xPBS pH 7.4-7.6 (phosphate buffered saline; provided by team)
Chloramphenicol (stock concentration 25 mg/mL dissolved in EtOH)
50 ml Falcon tube (or equivalent, preferably amber or covered in foil to block light)
Incubator at 37°C
1.5 ml eppendorf tubes for sample storage
Ice bucket with ice
Micropipettes and tips
96 well plate, black with clear flat bottom preferred (provided by team)

Devices (from Distribution Kit, all in pSB1C3 backbone):
Negative control BBa_R0040
Positive control BBa_I20270
Test Device 1 BBa_J364000
Test Device 2 BBa_J364001
Test Device 3 BBa_J364002
Test Device 4 BBa_J364007
Test Device 5 BBa_J364008
Test Device 6 BBa_J364009

Overview

Difficulty in taking reliable and reproducible measurements remains a key obstacle in establishing synthetic biology as an engineering discipline. The Measurement Committee, through the InterLab study, has been developing a robust measurement procedure for green fluorescent protein (GFP) over the last several years. Despite being one of the most commonly used markers in synthetic biology, labs often resort to making relative comparisons, which makes it difficult for labs to share and data and/or constructs.
The goal of the fifth iGEM InterLab Study is to identify and correct the sources of systematic variability in synthetic biology measurements by answering the question “Can we reduce lab-to-lab variability in fluorescence measurements by normalizing to absolute cell count or colony-forming units (CFUs) instead of OD? ”
As we know in the previous study, the fluorescence value measured by a plate reader is an aggregate measurement of an entire population of cells, we need to divide the total fluorescence by the number of cells in order to determine the mean expression level of GFP per cell. Due to the fact that the “optical density (OD) ” of the sample is an approximation of the number of cells varying from lab to lab, we decided to use a special silica beads that are roughly the same size and shape as a typical E. coli cell to set up a universal, standard “equivalent concentration of beads” measurement.

RESULTS

OD 600 Reference point

According to the Reference OD600, We calculate the final result:
OD600/Abs600=3.818
All cell density readings using this instrument with the same settings and volume can be converted to OD600, so that we can use this ratio to convert subsequent experimental data

Particle standard curve

We prepare a dilution series of monodisperse silica microspheres and measure the Abs 600 in plate reader. The size and optical characteristics of these microspheres are similar to cells, and there is a known amount of particles per volume. This measurement allows us to construct a standard curve of particle concentration which can be used to convert Abs 600 measurements to an estimated number of cells.
The final result:
mean of med-high levels=6.24E+08

Fluorescein standard curve

We prepare a dilution series of fluorescein in four replicates and measure the fluorescence in a 96 well plate in plate reader. By measuring these we generate a standard curve of fluorescence for fluorescein concentration. We will be able to use this to convert our cell based readings to an equivalent fluorescein concentration.
The final result:
Mean uM fluorescein / a.u.=3.60E-05
MEFL / a.u.=2.17E+08

Fluorescence Raw Readings

Abs600 Raw Readings