Difference between revisions of "Team:NU Kazakhstan"

 
(213 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{NU_Kazakhstan}}
+
{{Template:NU_Kazakhstan/CSS}}
 
<html>
 
<html>
−
<head>
+
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 +
<!--[if IE 7]>        <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 +
<!--[if IE 8]>        <html class="no-js lt-ie9"> <![endif]-->
 +
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 +
<head>
 +
<meta charset="utf-8">
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
<title>Valet &mdash; Free HTML5 Bootstrap Template by FREEHTML5.co</title>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<meta name="description" content="Free HTML5 Template by FREEHTML5.CO" />
 +
<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
 +
<meta name="author" content="FREEHTML5.CO" />
  
−
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
 
−
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
        <!-- animate -->
−
<style>
+
        <link rel="stylesheet" href="https://pastebin.com/raw/gy2T6iH2">
−
.hr ul{
+
      <!-- resptabs -->
−
list-style:none;}
+
        <link rel="stylesheet" href="https://pastebin.com/raw/29CU4DJK">
−
ul .hr {
+
      <!-- magnific popup -->
−
    margin: 0; /* Обнуляем значение отступов */
+
      <link rel="stylesheet" href="https://pastebin.com/raw/P5yLzmNd">
−
    padding: 4px; /* Значение полей */
+
     
 
    
 
    
−
  }
 
−
  ul.hr li {
 
−
    display: inline; /* Отображать как строчный элемент */
 
−
 
 
−
  }
 
−
  #div{
 
−
  border-bottom:1px solid black;
 
−
  margin:0px 0px;
 
−
  margin:auto auto;
 
−
  margin-top:15px;
 
−
  }
 
−
  span{font-family:"Roboto";}
 
−
  a{text-decoration:none;}
 
−
  a:link {
 
−
    color: #9ddef2;/* Цвет ссылок */
 
−
text-decoration:none;
 
−
    padding: 2px; /* Поля вокруг текста */
 
−
  }a{
 
−
  margin-left:5%;
 
−
  margin-right:5%;
 
−
  color:#000;
 
−
      font-size: 20px;
 
−
  }
 
−
  a:hover {
 
−
    color: #9ddef2 /* Цвет ссылки */
 
−
text-decoration:none;
 
−
  }
 
−
</style>
 
−
<style>
 
  
  
 +
<?php
  
−
table {
+
header("X-XSS-Protection: 0");
−
  border-collapse: collapse;
+
−
  border-spacing: 0; }
+
−
caption, th, td {
+
−
  text-align: left;
+
−
  font-weight: normal;
+
−
  vertical-align: middle; }
+
−
q, blockquote {
+
−
  quotes: none; }
+
−
  q:before, q:after, blockquote:before, blockquote:after {
+
−
    content: "";
+
−
    content: none; }
+
−
a img {
+
−
  border: none; }
+
−
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+
−
  display: block; }
+
  
 +
?>
 +
 
  
−
h1,h2,h3,h4,h5,h6 {
+
</head>
−
  font-weight:bold;
+
−
  font-size: 16px;
+
−
  margin: 12px 0;
+
−
}
+
  
−
h1 {
+
<body>
−
  margin: 35px 0 5px;
+
−
  font-size: 26px;
+
−
  font-weight: normal;
+
−
}
+
  
−
#slider {
+
<!-- START #fh5co-header -->
−
  text-align: center;
+
<header id="fh5co-header-section" role="header" class="" >
−
}
+
<div class="container">
  
−
h2 {
+
−
  margin: 40px 0 25px;
+
−
  border-bottom: 1px solid #bbb;
+
−
  padding: 0 0 10px;
+
−
}
+
  
−
p {
+
<!-- <div id="fh5co-menu-logo"> -->
−
  margin: 0 0 16px;
+
<!-- START #fh5co-logo -->
−
}
+
<!--<h1 id="fh5co-logo" class="pull-left"><a href="index.html"><img src="images/logo.png" alt="Valet Free HTML5 Template"></a></h1>
 +
-->
 +
<!-- START #fh5co-menu-wrap -->
 +
<nav id="fh5co-menu-wrap" role="navigation" >
 +
 +
 +
<ul class="sf-menu" id="fh5co-primary-menu" >
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan"  class="active" style="color:rgb(255, 255, 255)">Home</a></li>
 +
<li>
 +
<a href="#" class="fh5co-sub-ddown" style="color:rgb(255, 255, 255)">Project</a>
 +
<ul class="fh5co-sub-menu">
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Parts">Parts</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Results">Results</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Design">Design</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Model">Model</a></li>
 +
                                                                        <li><a href="https://2017.igem.org/Team:NU_Kazakhstan/IoP">Improvement of Parts</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/FP">Future Plans</a></li>
 +
                                                                      <li><a href="https://2017.igem.org/Team:NU_Kazakhstan/References">References</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="#" class="fh5co-sub-ddown" style="color:rgb(255, 255, 255)">Team</a>
 +
<ul class="fh5co-sub-menu">
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Team">Team</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Collaborations">Collaborations</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Attributions">Attributions</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="#" class="fh5co-sub-ddown" style="color:rgb(255, 255, 255)">Notebook</a>
 +
<ul class="fh5co-sub-menu">
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Protocols">Protocols</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Timeline">Calendar</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><a href="#" class="fh5co-sub-ddown" style="color:rgb(255, 255, 255)">Human Practices</a>
 +
<ul class="fh5co-sub-menu">
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/HP/Silver">Public Engagement</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/HP/Gold_Integrated">Integrated HP</a></li>
 +
  </ul>
 +
</li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/InterLab" style="color:rgb(255, 255, 255)">Interlab</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Safety" style="color:rgb(255, 255, 255)">Safety</a></li>
 +
<li><a href="https://2017.igem.org/Team:NU_Kazakhstan/Judging" style="color:rgb(255, 255, 255)">Judging Form</a></li>
 +
</ul>
 +
</nav>
 +
<!-- </div> -->
  
−
strong {
+
</div>
−
  font-weight: bold;
+
</header>
−
}
+
 +
<div id="fh5co-hero" style="background-image: url('https://image.ibb.co/jUB6YG/main_f.jpg')">
 +
<!-- <div class="overlay"></div> -->
 +
<a href="#fh5co-main" class="smoothscroll fh5co-arrow to-animate hero-animate-4"><i class="ti-angle-down"></i></a>
  
 +
<!-- End fh5co-arrow -->
 +
<div class="container">
 +
<div class="col-md-12">
 +
<div class="fh5co-hero-wrap">
 +
<div class="fh5co-hero-intro">
 +
<!-- <h1 class="to-animate hero-animate-1">Bioremediation of Cr (VI) from wastewater using microalgae</h1>
 +
<h2 class="to-animate hero-animate-2">Nazarbayev University, Astana, Kazakhstan</a></h2> -->
 +
<!-- <p class="to-animate hero-animate-3"><a href="#" class="btn btn-outline btn-md">Sign up</a></p> -->
 +
</div>
 +
</div>
 +
</div>
  
−
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
</div>
−
label, #active, img { -moz-user-select:none;-webkit-user-select:none; }
+
</div>
−
.catch { display: block; height: 0; overflow: hidden; }
+
−
#slider {
+
−
  margin: 0 auto;
+
−
}
+
−
#description {
+
−
  margin: 25px auto;
+
−
  text-align: left;
+
−
  max-width: 650px;
+
−
  padding: 0 25px;
+
−
}
+
−
.respond {
+
−
  margin: 0 auto;
+
−
  max-width: 370px;
+
−
}
+
  
  
  
−
/* NEW EXPERIMENT */
 
−
/* Slider Setup */
 
  
−
input {
+
<!-- section -->
−
  display: none;
+
−
}
+
  
−
#slide1:checked ~ #slides .inner { margin-left:0; }
+
<div id="fh5co-main">
−
#slide2:checked ~ #slides .inner { margin-left:-100%; }
+
−
#slide3:checked ~ #slides .inner { margin-left:-200%; }
+
                      <div class="container">
−
#slide4:checked ~ #slides .inner { margin-left:-300%; }
+
−
#slide5:checked ~ #slides .inner { margin-left:-400%; }
+
  
 +
                    <!-- Example row of columns -->
 +
                                        <div class="row">
  
−
#overflow {
+
                                                  <div class="content-box animate-box" id="fh5co-content">
−
  width: 100%;
+
<img src="https://image.ibb.co/gmJbiG/meet.png" style="display: block; margin-left: auto; margin-right: auto">
−
  overflow: hidden;
+
−
}
+
  
−
article img {
+
                                                                          <br>
−
  width: 100%;
+
                          <p>Chromium is a well-known toxin and carcinogen with wide industrial use. Pollution with chromium is a serious environmental concern in Kazakhstan since it is the 2nd largest chromium manufacturer in the world. Chromium primarily exists in two redox forms: trivalent and hexavalent. The former is poorly soluble and less toxic compared to the latter form. Hexavalent chromium is bioavailable and readily crosses membranes through sulfate transporters. The goal of our project is to collect Cr(VI) from wastewater, reduce it to trivalent form and store inside the microalgae <i>C. reinhardtii</i>. We are introducing chromate reductase which converts Cr(VI) to Cr(III) and oligopeptide chromodulin which tightly binds 4 Cr(III) ions. To increase chromate uptake into the cell, we are exploiting natural ability of <i>C. reinhardtii</i> to upregulate sulfate channels when starved from sulfur. Our safety system is represented by photosensitizing protein SuperNova. It generates ROS when exposed to 585 nm wavelength of light.</p>
−
}
+
<br><br>
 +
<img src="https://image.ibb.co/f9mJxb/map.jpg"  width="75%"  style="display: block; margin-left: auto; margin-right: auto">
  
−
#slides .inner {
+
     
−
  width: 500%;
+
<br><br><br>
−
  line-height: 0;
+
−
}
+
  
−
#slides article {
+
   
−
  width: 20%;
+
                                                </div>
−
  float: left;
+
−
}
+
  
−
/* Slider Styling */
 
  
−
/* Control Setup */
 
  
−
#controls {
+
                                          </div>
−
  margin: -25% 0 0 0;
+
                        </div>
−
  width: 100%;
+
            <!-- /container -->     
−
  height: 50px;
+
 
−
}
+
</div>
  
−
#controls label {
 
−
  display: none;
 
−
  width: 50px;
 
−
  height: 50px;
 
−
  opacity: 0.3;
 
−
}
 
  
−
#active {
 
−
  margin: 23% 0 0;
 
−
  text-align: center;
 
−
}
 
  
−
#active label {
+
−
  -webkit-border-radius: 5px;
+
−
  -moz-border-radius: 5px;
+
−
  border-radius: 5px;
+
−
  display: inline-block;
+
−
  width: 10px;
+
−
  height: 10px;
+
−
  background: #bbb;
+
−
}
+
  
−
#active label:hover {
 
−
  background: #ccc;
 
−
  border-color: #777 !important;
 
−
}
 
  
−
#controls label:hover {
+
<footer role="contentinfo" id="fh5co-footer">
−
  opacity: 0.8;
+
<a href="#" class="fh5co-arrow fh5co-gotop footer-box"><i class="ti-angle-up"></i></a>
−
}
+
<div class="container">
 +
<div class="row">
 +
<div class="col-md-4 col-sm-6 footer-box">
 +
<h3 class="fh5co-footer-heading">School of Science and Technology</h3>
 +
<ul class="fh5co-footer-links">
 +
<li>Nazarbayev University</li>
 +
<li>Astana, Kazakhstan</li>
 +
</ul>
 +
</div>
  
−
#slide1:checked ~ #controls label:nth-child(2),
+
<div class="col-md-4 col-sm-6 footer-box">
−
#slide2:checked ~ #controls label:nth-child(3),
+
<h3 class="fh5co-footer-heading"></h3>
−
#slide3:checked ~ #controls label:nth-child(4),
+
</div>
−
#slide4:checked ~ #controls label:nth-child(5),
+
−
#slide5:checked ~ #controls label:nth-child(1) {
+
−
  background: url('https://static.igem.org/mediawiki/2017/c/c4/Next.png') no-repeat;
+
−
  float: right;
+
−
  margin: 0 -70px 0 0;
+
−
  display: block;
+
−
}
+
  
 +
<div class="col-md-4 col-sm-12 footer-box">
 +
<h3 class="fh5co-footer-heading">Get in touch</h3>
 +
<ul class="fh5co-social-icons">
 +
 +
<li><a href="mailto:igem@nu.edu.kz"><i class="ti-google"></i></a></li>
 +
<li><a href="https://www.facebook.com/nu.kazakhstan/"><i class="ti-facebook"></i></a></li>
 +
<li><a href="https://www.instagram.com/igem_nu_kazakhstan/"><i class="ti-instagram"></i></a></li>
 +
</ul>
 +
</div>
 +
 +
 +
</div>
 +
<!-- END row -->
 +
<div class="fh5co-spacer fh5co-spacer-md"></div>
 +
</div>
 +
</footer>
 +
 +
  
−
#slide1:checked ~ #controls label:nth-child(5),
+
                <!-- jquery -->
−
#slide2:checked ~ #controls label:nth-child(1),
+
              <script src="https://pastebin.com/raw/Q0napJ4n"></script>
−
#slide3:checked ~ #controls label:nth-child(2),
+
−
#slide4:checked ~ #controls label:nth-child(3),
+
−
#slide5:checked ~ #controls label:nth-child(4) {
+
−
  background: url('https://static.igem.org/mediawiki/2017/f/f1/Prev.png') no-repeat;
+
−
  float: left;
+
−
  margin: 0 0 0 -70px;
+
−
  display: block;
+
−
}
+
  
−
#slide1:checked ~ #active label:nth-child(1),
+
<!-- jQuery Easing -->
−
#slide2:checked ~ #active label:nth-child(2),
+
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
−
#slide3:checked ~ #active label:nth-child(3),
+
<!-- Bootstrap -->
−
#slide4:checked ~ #active label:nth-child(4),
+
<script src="https://pastebin.com/raw/uuT2N4nK"></script>
−
#slide5:checked ~ #active label:nth-child(5) {
+
<!-- Owl carousel -->
−
  background: #333;
+
<script src="https://pastebin.com/raw/q12Q0Lbp"></script>
−
  border-color: #333 !important;
+
<!-- Magnific Popup -->
−
}
+
<script src="https://pastebin.com/raw/gN2xTMMU"></script>
 +
<!-- Superfish -->
 +
<script src="https://pastebin.com/raw/q7E7B9xP"></script>
 +
<script src="https://pastebin.com/raw/1Jq1nAcS"></script>
 +
              <!-- Main JS -->
 +
<!--<script src="js/main.js"></script>-->
 +
<script src="https://pastebin.com/raw/qWtdumtx"></script>
 +
              <!-- waypoints -->
 +
              <script src="https://pastebin.com/raw/EBGAnc6S"></script>
 +
            <!-- easytabs -->
 +
            <script src="https://pastebin.com/raw/MWBfthGr"></script>
 +
              <!-- modernizer -->
 +
            <script src="https://pastebin.com/raw/p2bLnWEw"></script>
 +
            <!-- respond -->
 +
            <script src="https://pastebin.com/raw/WSu7E07P"></script>
  
−
/* Info Box */
 
  
−
.info {
 
−
  line-height: 20px;
 
−
  margin: 0 0 -150%;
 
−
  position: absolute;
 
−
  font-style: italic;
 
−
  padding: 30px 30px;
 
−
  opacity: 0;
 
−
  color: #000;
 
−
  text-align: left;
 
−
}
 
  
−
.info h3 {
 
−
  color: #333;
 
−
  margin: 0 0 5px;
 
−
  font-weight: normal;
 
−
  font-size: 22px;
 
−
  font-style: normal;
 
−
}
 
  
−
/* Slider Styling */
 
  
−
#slides {
+
   </body>
−
   margin: 45px 0 0;
+
−
  -webkit-border-radius: 5px;
+
−
  -moz-border-radius: 5px;
+
−
  border-radius: 5px;
+
−
  box-shadow: 1px 1px 4px #666;
+
−
  padding: 1%;
+
−
  background: #fff;
+
−
  background: rgb(252,255,244); /* Old browsers */
+
−
  background: -moz-linear-gradient(top,  rgba(252,255,244,1) 0%, rgba(219,218,201,1) 100%); /* FF3.6+ */
+
−
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(219,218,201,1))); /* Chrome,Safari4+ */
+
−
  background: -webkit-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Chrome10+,Safari5.1+ */
+
−
  background: -o-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Opera 11.10+ */
+
−
  background: -ms-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* IE10+ */
+
−
  background: linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* W3C */
+
−
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */
+
−
}
+
−
 
+
−
 
+
−
/* Animation */
+
−
 
+
−
#slides .inner {
+
−
  -webkit-transform: translateZ(0);
+
−
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
    -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
+
−
 
+
−
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
    -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
+
−
}
+
−
 
+
−
#slider {
+
−
  -webkit-transform: translateZ(0);
+
−
  -webkit-transition: all 0.5s ease-out;
+
−
  -moz-transition: all 0.5s ease-out;
+
−
  -o-transition: all 0.5s ease-out;
+
−
  transition: all 0.5s ease-out;
+
−
}
+
−
 
+
−
#controls label{
+
−
  -webkit-transform: translateZ(0);
+
−
  -webkit-transition: opacity 0.2s ease-out;
+
−
  -moz-transition: opacity 0.2s ease-out;
+
−
  -o-transition: opacity 0.2s ease-out;
+
−
  transition: opacity 0.2s ease-out;
+
−
}
+
−
 
+
−
#slide1:checked ~ #slides article:nth-child(1) .info,
+
−
#slide2:checked ~ #slides article:nth-child(2) .info,
+
−
#slide3:checked ~ #slides article:nth-child(3) .info,
+
−
#slide4:checked ~ #slides article:nth-child(4) .info,
+
−
#slide5:checked ~ #slides article:nth-child(5) .info {
+
−
  opacity: 1;
+
−
  -webkit-transition: all 1s ease-out 0.6s;
+
−
  -moz-transition: all 1s ease-out 0.6s;
+
−
  -o-transition: all 1s ease-out 0.6s;
+
−
  transition: all 1s ease-out 0.6s;
+
−
}
+
−
 
+
−
.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
+
−
  -webkit-transform: translateZ(0);
+
−
  -webkit-transition: all 0.5s ease-out;
+
−
  -moz-transition: all 0.5s ease-out;
+
−
  -o-transition: all 0.5s ease-out;
+
−
  transition: all 0.5s ease-out;
+
−
}
+
−
 
+
−
/* Respond Options */
+
−
 
+
−
#desktop:checked ~ #slider {
+
−
  max-width: 960px;
+
−
}
+
−
 
+
−
#tablet:checked ~ #slider {
+
−
  max-width: 850px;
+
−
}
+
−
 
+
−
#mobile:checked ~ #slider {
+
−
  max-width: 450px;
+
−
}
+
−
 
+
−
#desktop:checked ~ #slider .desktop,
+
−
#tablet:checked ~ #slider .tablet,
+
−
#mobile:checked ~ #slider .mobile {
+
−
  color: #777;
+
−
  opacity: 1;
+
−
}
+
−
 
+
−
.desktop, .tablet, .mobile {
+
−
  display: inline-block;
+
−
  width: 60px;
+
−
  height: 60px;
+
−
  padding-top: 50px;
+
−
  opacity: 0.35;
+
−
  font-size: 12px;
+
−
}
+
−
 
+
−
.desktop:hover, .tablet:hover, .mobile:hover {
+
−
  opacity: 0.2;
+
−
}
+
−
 
+
−
.desktop {
+
−
  background: url('images/desktop.png') no-repeat;
+
−
}
+
−
 
+
−
.tablet {
+
−
  background: url('images/tablet.png') no-repeat;
+
−
}
+
−
 
+
−
.mobile {
+
−
  background: url('images/mobile.png') no-repeat;
+
−
}
+
−
 
+
−
/* Responsive Styling */
+
−
 
+
−
/* Tablet */
+
−
 
+
−
#tablet:checked ~ #slider #controls {
+
−
  margin: -25% 0 0 12%;
+
−
  width: 76%;
+
−
  height: 50px;
+
−
}
+
−
 
+
−
#tablet:checked ~ #slider #controls label {
+
−
  -moz-transform: scale(0.8);
+
−
  -webkit-transform: scale(0.8);
+
−
  -o-transform: scale(0.8);
+
−
  -ms-transform: scale(0.8);
+
−
  transform: scale(0.8);
+
−
}
+
−
 
+
−
#tablet:checked  ~ #slider #slides, #mobile:checked  ~ #slider #slides {
+
−
  padding: 1% 0;
+
−
  -webkit-border-radius: 0px;
+
−
  -moz-border-radius: 0px;
+
−
  border-radius: 0px;
+
−
}
+
−
 
+
−
#tablet:checked ~ #slider #active {
+
−
  margin: 22% 0 0;
+
−
}
+
−
 
+
−
@media only screen and (max-width: 850px) and (min-width: 450px) {
+
−
 
+
−
  #slider #controls {
+
−
    margin: -25% 0 0 15%;
+
−
    width: 70%;
+
−
    height: 50px;
+
−
  }
+
−
 
+
−
  #slider #controls label {
+
−
    -moz-transform: scale(0.8);
+
−
    -webkit-transform: scale(0.8);
+
−
    -o-transform: scale(0.8);
+
−
    -ms-transform: scale(0.8);
+
−
    transform: scale(0.8);
+
−
  }
+
−
 
+
−
  #slider #slides {
+
−
    padding: 1% 0;
+
−
    -webkit-border-radius: 0px;
+
−
    -moz-border-radius: 0px;
+
−
    border-radius: 0px;
+
−
  }
+
−
 
+
−
  #slider #active {
+
−
    margin: 22% 0 0;
+
−
  }
+
−
 
+
−
 
+
−
/* Mobile */
+
−
 
+
−
#mobile:checked ~ #slider #controls {
+
−
  margin: -28% 0 0 24%;
+
−
  width: 50%;
+
−
  height: 50px;
+
−
}
+
−
 
+
−
#mobile:checked ~ #slider #active {
+
−
  margin: 23% 0 0;
+
−
}
+
−
 
+
−
#mobile:checked ~ #slider #slides .info {
+
−
  opacity: 0 !important;
+
−
}
+
−
 
+
−
#mobile:checked ~ #slider #controls label {
+
−
  -moz-transform: scale(0.6);
+
−
  -webkit-transform: scale(0.6);
+
−
  -o-transform: scale(0.6);
+
−
  -ms-transform: scale(0.6);
+
−
  transform: scale(0.6);
+
−
}
+
−
 
+
−
 
+
−
@media only screen and (max-width: 450px) {
+
−
 
+
−
  #slider #controls {
+
−
    margin: -28% 0 0 24%;
+
−
    width: 50%;
+
−
    height: 50px;
+
−
  }
+
−
 
+
−
  #slider #active {
+
−
    margin: 23% 0 0;
+
−
  }
+
−
 
+
−
  #slider #slides {
+
−
    padding: 1% 0;
+
−
    -webkit-border-radius: 0px;
+
−
    -moz-border-radius: 0px;
+
−
    border-radius: 0px;
+
−
  }
+
−
 
+
−
  #slider #slides .info {
+
−
    opacity: 0 !important;
+
−
  }
+
−
 
+
−
  #slider #controls label {
+
−
    -moz-transform: scale(0.6);
+
−
    -webkit-transform: scale(0.6);
+
−
    -o-transform: scale(0.6);
+
−
    -ms-transform: scale(0.6);
+
−
    transform: scale(0.6);
+
−
  }
+
−
 
+
−
 
+
−
@media only screen and (min-width: 850px) {
+
−
 
+
−
  body {
+
−
    padding: 0 80px;
+
−
  }
+
−
</style>
+
−
</head>
+
−
<body style="font-family:Roboto;">
+
−
<div id="div"><center>
+
−
<ul class="hr">
+
−
<li><span><a href="index.html">Home</a></span></li>
+
−
<li><span><a href="research.html">Research</a></span></li>
+
−
<li><span><a href="https://2017.igem.org/Team:NU_Kazakhstan/Team">Team</a></span></li>
+
−
<li><span><a href="contact.html">Contact</a></span></li>
+
−
<li><span><a href="notebook.html">Notebook</a></span></li>
+
−
</ul></center>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  <input checked type=radio name=respond id=desktop />
+
−
  <input type=radio name=respond id=tablet />
+
−
  <input type=radio name=respond id=mobile />
+
−
  <article id=slider>
+
−
   
+
−
 
+
−
 
+
−
   
+
−
   
+
−
 
+
−
    <!-- Slider Setup -->
+
−
 
+
−
    <input checked type=radio name=slider id=slide1 />
+
−
    <input type=radio name=slider id=slide2 />
+
−
    <input type=radio name=slider id=slide3 />
+
−
    <input type=radio name=slider id=slide4 />
+
−
    <input type=radio name=slider id=slide5 />
+
−
 
+
−
 
+
−
    <!-- The Slider -->
+
−
 
+
−
   
+
−
    <div id=slides>
+
−
   
+
−
      <div id=overflow>
+
−
     
+
−
        <div class=inner>
+
−
       
+
−
          <article>
+
−
           
+
−
            <img src="https://static.igem.org/mediawiki/2017/c/c8/CouldDragonByBjzaba.png" />
+
−
          </article>
+
−
 
+
−
         
+
−
          <article>
+
−
            <img src="https://static.igem.org/mediawiki/2017/7/71/MountainFortByBjzaba.png" />
+
−
          </article>
+
−
         
+
−
          <article>
+
−
 
+
−
            <img src="https://static.igem.org/mediawiki/2017/6/62/MountainOutpostByBjzaba.png" />
+
−
          </article>
+
−
         
+
−
          <article>
+
−
            <img src="https://static.igem.org/mediawiki/2017/0/0f/CliffsByBjzaba.png" />
+
−
          </article>
+
−
         
+
−
          <article>
+
−
 
+
−
            <img src="https://static.igem.org/mediawiki/2017/0/07/HillFortByBjzaba.png" />
+
−
          </article>
+
−
         
+
−
        </div> <!-- .inner -->
+
−
       
+
−
      </div> <!-- #overflow -->
+
−
   
+
−
    </div> <!-- #slides -->
+
−
 
+
−
 
+
−
 
+
−
    <!-- Controls and Active Slide Display -->
+
−
 
+
−
    <div id=controls>
+
−
 
+
−
      <label for=slide1></label>
+
−
      <label for=slide2></label>
+
−
      <label for=slide3></label>
+
−
      <label for=slide4></label>
+
−
      <label for=slide5></label>
+
−
   
+
−
    </div> <!-- #controls -->
+
−
 
+
−
   
+
−
    <div id=active>
+
−
 
+
−
      <label for=slide1></label>
+
−
      <label for=slide2></label>
+
−
      <label for=slide3></label>
+
−
      <label for=slide4></label>
+
−
      <label for=slide5></label>
+
−
     
+
−
    </div>
+
−
</article>
+
−
</body>
+
 
</html>
 
</html>

Latest revision as of 02:58, 2 November 2017

Valet — Free HTML5 Bootstrap Template by FREEHTML5.co


Chromium is a well-known toxin and carcinogen with wide industrial use. Pollution with chromium is a serious environmental concern in Kazakhstan since it is the 2nd largest chromium manufacturer in the world. Chromium primarily exists in two redox forms: trivalent and hexavalent. The former is poorly soluble and less toxic compared to the latter form. Hexavalent chromium is bioavailable and readily crosses membranes through sulfate transporters. The goal of our project is to collect Cr(VI) from wastewater, reduce it to trivalent form and store inside the microalgae C. reinhardtii. We are introducing chromate reductase which converts Cr(VI) to Cr(III) and oligopeptide chromodulin which tightly binds 4 Cr(III) ions. To increase chromate uptake into the cell, we are exploiting natural ability of C. reinhardtii to upregulate sulfate channels when starved from sulfur. Our safety system is represented by photosensitizing protein SuperNova. It generates ROS when exposed to 585 nm wavelength of light.






School of Science and Technology

  • Nazarbayev University
  • Astana, Kazakhstan

Get in touch