Difference between revisions of "Team:BNU-China/Model"

Line 1: Line 1:
−
{{BNU-CHINA/partials/header}}
+
/**----------------------------------------------
−
{{BNU-CHINA/partials/nav | MODELING=focus}}
+
>>> Table of Contents:
−
<html>
+
------------------------------------------------
−
<div class="main-container">
+
0.0 global
−
    <div id="page-heading" class="container-fluid page-heading" style="background-image: url(https://static.igem.org/mediawiki/2016/0/0b/T--BNU-China--rabbit.jpg);">
+
1.0 main-container
−
        <h3> MODELING </h3>
+
2.0 page-heading
−
    </div>
+
3.0 navigation
−
    <div>
+
4.0 page-story
−
        <div class="container page-story">
+
5.0 team-page
−
            <article id="modeling" class="col-lg-10 col-lg-offset-1 col-md-12 col-md-offset-0 col-sm-offset-0 col-sm-12">
+
6.0 achievements-page
−
                <header class="page-header">
+
7.0 attributions
−
                <h1 id="model-introduction">Modeling</h1>
+
8.0 practices
−
                    <small id="secondary-page-header">This is our Modeling Design</small>
+
  9.0 footer
−
                </header>
+
------------------------------------------------
−
                <h2>Introduction</h2>
+
*/
−
                <p>Dynamic instability of microtubule during its lifetime is very interesting and worth researching. When a cancer patient is cured by taxol treatment fortunately, it should be owed to taxol's interaction with microtubule in dynamic growth process. So it's significant to explore principles of this process. We established a series of math works to clarify mechanisms of microtubule dilution system. Then we got data from wet parts of our project. Our model predicts observed data and phenomenon. In conclusion, we have presented a model that utilizes basic kinetics and it has been proved by experimental observations. We can use it to predict results in other conditions for guidance.</p>
+
/**
−
                <p>What we have done to analyze the dynamic process can be divided into three steps.</p>
+
-- 0.0 global
−
                <figure class="text-center">
+
*/
−
                    <img src="https://static.igem.org/mediawiki/2016/e/e9/Modeling_steps.png" alt="this is a pic" width="60%">
+
−
                    <figcaption>
+
−
                        Fig.1 Our process
+
−
                    </figcaption>
+
−
                </figure>
+
−
                <p id="model-theory">First we proved that taxol has a significant influence on microtubule growth by using the data which are provided from wet parts. Then we presented two differential equations model. One is an original differential equation model that can predict taxol’s influence on amount of microtubule. The other is a partial differential equation model expounding analytic solution. Since it’s hard to understand if someone lacks of necessary math skills, we build a program in MATLAB<sup>@</sup> to visualize the kinetics in microtubule disaggregation.</p>
+
−
              <h2>Modeling theory</h2>
+
−
                <p>Microtubule is made up of 13 protofilaments. Now there is a widely accepted feature about the microtubule that microtubule has highly complicated dynamic instability. Under vitro cultures conditions, on the one hand, subunits will polymerize automatically to form fine structure when subunits condition is above the critical concentration; on the other hand, the microtubule will depolymerize into subunits when subunits condition is under the critical concentration. Apart from that, the single microtubule will always in the stage of aggregation and disaggregation.</p>
+
−
                <p>Tubulin is made up of two tubulin monomers which are nearly the same as each other. These two tubulin monomers are named α tubulin monomer and β tubulin monomer. Microtubule is made up of 13 protofilaments aggregated by tubulin dimers end to end. And microtubule can be the hollow tube with 13 protofilaments coiled into helix with each other, water in hollow part. The tube wall is 4～5nm thick.
+
−
Tubulin dimers are incorporated into the growing lattice in the GTP-bound form and stochastically hydrolyze to GDP-tubulin, thus forming a GTP-cap. It is thought that the switching from growth to shrinkage occurs due to the loss of the GTP-cap.
+
−
</p>
+
  
−
                <p>Caplow M<sup><a href="https://2016.igem.org/Team:BNU-China/Design#ref-1">[1]</a></sup> research shows that when the cap structure of microtubule plus end subunit containing GDP- beta tubulin instead of GTP- beta tubulin, microtubule becomes unstable and will quickly disaggregate.</p>
+
.header-color {
−
                <figure class="text-center">
+
  background: #ffffff;
−
                    <img src="https://static.igem.org/mediawiki/2016/1/1d/Modeling_theory1.png" alt="this is a pic"  width="60%">
+
  color: #646464;
−
                    <figcaption>
+
}
−
                        Fig.2 Microtubule dynamic instability
+
−
                    </figcaption>
+
−
                </figure>
+
−
                <p>As is shown in the figure, there are two kinds of Dimer, called GDP and GTP, with blue and red two connected to the circular. These dimers have close relationship with each other, and there are three important modes of their action.</p>   
+
−
                <ol>
+
−
                    <li>
+
−
                        GTP-tubulin dimer in endpoint can aggregate new GTP to make the single protofilament grow, and microtubules extend.
+
−
                    </li>
+
−
                    <li>
+
−
                        At the same time, the endpoint GTP may also be made off, thereby protofilaments shorter.
+
−
                    </li>
+
−
                    <li>
+
−
                        Any place of GTP (in addition to the right endpoints of the GTP) made made random hydrolyzed to GDP have a chance.
+
−
                    </li>
+
−
                </ol>
+
−
                  <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/1/1d/Modeling_theory1.png" alt="this is a pic"  width="60%">
+
−
                    <figcaption>
+
−
                        Fig.3 Parameters of GTP-tubulin dimer hydrolysis
+
−
                    </figcaption>
+
−
                </figure>
+
−
               
+
−
                <p id="model-factor">According to above principles, we set three parameters to simulate the process. Fig.3 is the schematic diagram of the principle of GTP hydrolysis. Among them  means GTP, D means GDP, \(r\) means the probability of endpoint GTP polymerizing with new GTP, \(k\) means the probability of endpoint falling off, \(h\) means the probability of GTP hydrolysis into GDP. It should be noted that once GTP is transferred to GDP, it will not have aggregation, fall off, or hydrolysis, and will become stable state.</p>
+
−
               
+
−
                <h2>Single Factor Analysis of Variance</h2>
+
−
                <p>In order to verify the effect of taxol on the length of microtubule formation, we used descriptive statistical analysis and single factor analysis of variance (ANOVA) to extract the experimental data.</p>
+
−
                <h3>1.0 - Descriptive statistical analysis</h3>
+
−
                <p>Before we use the one-way analysis of variance to deal with the data, we need to conduct some simple descriptive statistical analysis. This analysis can help us gain the overall understanding of the data, find the abnormal data, and then guide our next work.</p>
+
−
                <p>Now that the interpreted variable is discrete, we use the Box Plot to describe the light absorption value OD350 under the different concentration of the taxol.</p>
+
−
                <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/3/35/BNUstatistical_2.png" width="60%">
+
−
                </figure>
+
−
               
+
−
                <h3>2.0 - Theory of the one-way analysis of variance</h3>
+
−
                <p>By constructing the F-test statistics, we can use the one-way analysis of variance to study whether classification of the independent variable’s different levels can make significant influence on the variation of the continuous variable. If the levels have a significant influence, we can further give the 95% confidence interval of the dependent variable means under the different levels of the independent variable, and then we can analyze the degree of the different levels. But the precondition is that the data should satisfy the homogeneity of variance, in other words, the variance of the data should be the independent identically distributed. In the next part of the modeling, we will use the one-way analysis of variance to analyze the data, and then deal with the data.</p>
+
−
                <h3>To determine whether the data suitable for single factor analysis of variance</h3>
+
−
                <p>We use the SPSS to do the homogeneity test of variance with the data we got, the outcome is shown in the figure below:</p>
+
−
                <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/e/e3/BNUstatistical_1.png" width="60%">
+
−
                    <figcaption>
+
−
                        Fig.4 The figure of the data’s homogeneity test of variance
+
−
                    </figcaption>
+
−
                </figure>
+
−
                <p>From the figure, we can see the data’s variance is 0.519, bigger than 0.05. Therefore, we can think the data meets the requirement about the homogeneity of variance and we can use the one-way analysis of variance to deal with the data.</p>
+
−
                <h3>3.0 - Construct the F-test statistics</h3>
+
−
                <p>The independent variable is a classified variable which values 0 and 1 to describe whether the tax is added into the test tube. The dependent variable is the change of the micrutubule’ length, our modeling is shown below:</p>
+
−
                <p>
+
−
                    $$ y = u_i + \varepsilon_{ij} \tag{1} $$
+
−
                </p>
+
−
                <p>In the equation (1), \(y\) is the dependent variable, the change of the microtubule's length. \(y_{ij}\) is the \(j\) observed value of the independent variable under the \(i\) level. is the mean of dependent variable under the \(i\) level.  stands for the residual between dependent variable’s value and it’s mean value,  also obey the normal distribution  \(N(0, \sigma_i ^2)\)</p>
+
−
                <p>Then we construct the F test statistics. First, we define the quadratic sum of the residual:</p>
+
−
                <p>
+
−
                    $$ SSE = \sum_{i=1}^k \sum_{j=1}^{n_i} (y_{ij}-\overline y_1)^2 \tag{2}$$
+
−
                </p>
+
−
                <p>
+
−
                    And the quadratic sum of the elements:
+
−
                </p>
+
−
                <p>
+
−
                    $$ SSA = \sum_{i=1}^k n_i (\overline y_{1}-\overline y)^2 \tag{3}$$
+
−
                </p>
+
−
                <p>SSA reflects the variance between different levels and the difference is made by the different elements; SSE reflects the variance in a certain level and this random difference is due to the selected sample’s random. For example, the measured length of the microtubule will be different when we add taxol into the test tube.</p>
+
−
                <p>On the basis of the theory, our F test statistics is:</p>
+
−
                <p>
+
−
                    $$ F = \frac{SSA/(n-k)}{SSE/(k-1)} \sim F(n-k, k-1) \tag{4}$$
+
−
                </p>
+
−
                <p>The numerator of the equation is a part of the dependent variable which can be explained by the change of the independent variable, while the denominator of the equation can be explained by other random elements except the change of the independent variable. The proportion of the change of independent variable in all change of the dependent variable becomes bigger, in other words, F has a higher value, independent variable influence dependent variable more.</p>
+
  
−
                <h3>4.0 - The F-test on the data</h3>
+
/**
−
             
+
--  1.0 main-container
−
                <P>Our F-test’s null hypothesis is:</P>
+
*/
−
                <p>$$ H_0:μ_1=μ_2=⋯=μ_k  \quad  vs  \quad  H_1=\quad not \quad H_0 \tag{5}$$</p>
+
.main-container {
−
                <p>
+
  top: 0;
−
                \(H_0\) stands for that different values of the independent variable（the added taxol‘s concentration) make no difference to the mean value of the dependent variable(the light absorption value OD350), in other words, the independent is not important to the dependent variable. Then we use R software to conduct F-test, the outcome is shown below:
+
  left: 0;
−
                </p>
+
  right: 0;
−
                <figure class="text-center">
+
   margin: 0;
−
                    <img src="https://static.igem.org/mediawiki/2016/b/b6/BNUstatistical_3.png" width="60%">
+
  padding: 0;
−
                    <figcaption>
+
  background-color: white;
−
                        Fig.5 Outcome of the F-test about the data
+
   overflow: auto;
−
                    </figcaption>
+
   position: absolute;
−
                </figure>
+
}
−
                <p id="model-differential">From the outcome, \(F’s\) value is 1.337, nearly 1. Apart from that, the significance is 0.27, bigger than 0.05. Therefore, we can't think the independent variable make distinct influence on the dependent variable.</p>
+
−
               
+
−
                <h2>Differential Equation Model</h2>
+
−
                <p>For studying the dynamic progress of tubulin assembling under the influence of Taxol, we build the differential equations to describe such progress numerically.  </p>
+
−
               
+
−
                <p>First we have to consider what happened in the tubulin solution. Protein filaments will assemble into the tubulins automatically by arranging dimers. Specifically, the GTP-cap can aggregate or disaggregate at one side of the protein filament. Besides, there are chances that the GTP can hydrolysis to GDP, which can no longer combine the new GTP. In this process, the length and amount of the tubulin are in the dynamic equilibrium or changing. </p>
+
−
               
+
−
                <p>We know that the differential equations can describe the numerical relationships and patterns between related promoters. Based on these studies, we can make the better plan, central or prediction in the experiments. </p>
+
−
               
+
−
                <p>We consider the tubulin length is the function of time, assembling rate, disaggregation and hydrolysis rate. According to the literature, there are some relationships between these promoters.</p>
+
−
               
+
−
                <h3>Details of Original Differential Equation Model</h3>
+
−
                <p>a. - Model Assumption</p>
+
−
               
+
−
                <ol>
+
−
                    <li>
+
−
                        We only consider tree main phenomenon in the solution: disaggregation, aggregation and hydrolysis.
+
−
                    </li>
+
−
                    <li>
+
−
                        There are three types of dimers, Taxol-dimer, GTP-dimer and GDP-dimer. Only Taxol-dimer and GTP-dimer, no matter they are dissociative or already fixed on the filament, can aggregate new Taxol-dimer and GTP-dimer.
+
−
                    </li>
+
−
                    <li>
+
−
                        Especially, the difference between Taxol-dimer and GTP-dimer is that new fixed aggregation Taxol-dimer will not disaggregate and become dissociative again.
+
−
                    </li>
+
−
                    <li>According to literature <sup><a href="https://2016.igem.org/Team:BNU-China/Design#ref-2">[2]</a></sup>, every Taxol-dimer and GTP-dimer may hydrolyze into GDP-dimer, which can no longer combine new dimers and growth.</li>
+
−
                </ol>
+
−
                <p>b. - Parameter specification</p>
+
−
               
+
−
                <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/1/1f/BNUODE_2.png" width="60%">
+
−
                </figure>
+
−
               
+
−
                <p>c. - The explanation of the process</p>
+
−
               
+
−
                <p>As we discussed in the modeling theory, we only consider three main phenomena: disaggregation, aggregation and hydrolysis.</p>
+
−
                <p>Now we consider how these filaments growth specifically. At first, initial \(T_1\) and \(T_2\) are added in the solution. Then they aggregate into filaments forms, including \(G_{11}\), \(G_{21}\), \(G_{12}\), \(G_{22}\)(the meaning of these parameters are specified in table above).
+
−
\(G_{11}\) and \(G_{21}\) can become \(G_{12}\) and \(G_{22}\) if new dimers are aggregated at the endpoint. Also \(G_{11}\)and \(G_{21}\) can disaggregate into the solution and become dissociative dimers (\(T_1\) and \(T_2\) again. If all the GTP-dimers at the endpoint become the GDP-dimers or there is not enough \(T_1\) and \(T_2\) in the solution, the growing process is stop.
+
−
</p>
+
−
                <p>The flow chart of this process can be illustrated as follow:</p>
+
−
               
+
−
                <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/6/64/BNUODE_1.png" width="60%">
+
−
                </figure>
+
−
               
+
−
                <p>According to the flow chart, we can get the ODE equations as follow.</p>
+
−
               
+
−
                <p>$\dot{T_1}=k_1 G_{11}-r_1(G_{11}+G_{21})$</p>
+
−
                <p>$\dot{T_2}=-r_2(G_{21}+G_{11})$</p>
+
−
                <p>$\dot{G_{11}}=-r_2(G_{11}+G_{21})+r_1(G_{11}+G_{21})-k_1 G_{11} \frac{G_{21}}{(G_{11}+G_{21})-h G_{11}}$</p>
+
−
                <p>$\dot{G_{21}}=r_2(G_{11}+G_{21})-r_1(G_{11}+G_{21})+k_1 G_{11} \frac{G_{21}}{(G_{11}+G_{21})}$</p>
+
−
                <p>$\dot{G_{22}}=r_2 G_{21}$</p>
+
−
                <p>$\dot{G_{12}}=(r_1 + r_2)G_{11}-k_{1}G_{11}+r_1 G_{21}- h G_{12}$</p>
+
−
                <p>$\dot{D}=h(G_{11}+G_{12})$</p>
+
−
               
+
−
                <p>We can get numerical solutions easily by Matlab as soon as initial \(T_1\)and \(T_2\) are given. Obviously, initial \(T_1\) is related to the initial Taxol concentration. Accordingly, initial \(T_2\) is related to the initial GTP-dimer quantity. All these promoters are initial conditions in the experiment. </p>
+
−
               
+
−
                <p>We consider a kind of initial conditions of \(T_1\) and \(T_2\). Actually, any initial \(T_1\) and \(T_2\) in the experiment can be modeled and we can predict the numerical trends. The solutions of one of our example are given in the following charts.
+
−
(initial \(T_1\)=50000, initial \(T_2\)=3000, initial \(G_{11}\)=3000, Initial \(G_{21}\)=1000)
+
−
</p>
+
−
                <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/6/68/BNUODE_3.png" width="60%">
+
−
                    <figcaption>
+
−
                        Fig.6 ODE numerical solutions results
+
−
                    </figcaption>
+
−
                </figure>
+
−
<p>What we can get from our ODE model is \(G_1\) and \(G_2\), which indicate the quantity of filaments with GTP-cap and Taxol-cap, which is equal to the number of GTP-dimers at endpoint and the number of Taxol-dimers at endpoint. Sum of them is equal to the whole filaments units number in this dilution system. Since it should be proportionate to quantities of microtubules only by a coefficient \(\lambda \), we can use this to simulate the results whose condition is used in the wet parts. </p>
+
−
               
+
−
                <h3>Details of Partial Differential Equation Model</h3>
+
−
                <p>We know that the movement of any material is ruled by the certain laws of nature (physical and chemical laws). We establish some mathematical model including partial differential equations to describe these rules especially the mechanism of numerical relationships in the tubulin. </p>
+
−
                <p>We build the partial differential equations and definition conditions based on the conservation laws.</p>
+
−
               
+
−
                <p>The tubulin solution area \(\Omega\)  is thought to be a kind of fluid motion. In the solution there are many assembling of tubulins, the hydrolysis, aggregations and disaggregation of the protein filaments. Although the mechanisms of these biological phenomena are still uncertain but we can build the equations based on conservation laws, which certainly rule the biomass.</p>
+
−
                <p>We take a solution area as our study object. The quantity in the solution area is certainly ruled by conservation laws no matter what shape of the area is. Our models are based on conservation of mass.</p>
+
−
                <p>We choose a solution area \(D\)  in the \(\Omega\) . Considering in the time range  , according to the mass conservation:</p>
+
−
               
+
−
                <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/5/54/BNUPDE_0.png" width="60%">
+
−
               
+
−
                </figure>
+
−
               
+
−
                <p> \(\overrightarrow{f_1}\) is the velocity of assembling of the solution which flow into the \(D\) . \(\overrightarrow{f_1}\)  can be regarded as the product of the velocity \(\overrightarrow{v}\) and the assembling ratio \(k\) . However, there is no need to consider the  \(\overrightarrow{v}\) and \(k\) . The inflow mass during  \(dt\) through any  \(dS\) of the \(\partial D\)  can be given:</p>
+
−
               
+
−
                <p>$$-\rho \cdot \overrightarrow{f_1} \cdot \overrightarrow{n} \cdot dS \cdot dt$$</p>
+
−
               
+
−
                <p> \(\overrightarrow{n}\) is the unit normal vector toward outside so there is a minus in formula. \(\rho\) is the density of the tubulin solution in \(D\) . In a similar way \(\overrightarrow{f_2}\) is the velocity of the disaggregation mass which flow out the \(D\)  and \(\overrightarrow{f_2}\)  can be considered as the product of outflow velocity  \(\overrightarrow{v_2}\) and disaggregation ratio \(r\) there is no need to consider the  \(\overrightarrow{v_2}\) and \(r\) . So the outflow mass during \(dt\)  through any  \(dS\) of the \(\partial D\)  can be given:</p>
+
−
               
+
−
                <p>$$\rho \cdot \overrightarrow{f_2} \cdot \overrightarrow{n} \cdot dS \cdot dt $$</p>
+
−
               
+
−
                <p>According to the mass conservation we can get the equation:</p>
+
−
               
+
−
                <p>$$\iiint_D(\rho |_{t=t_2}- \rho |_{t=t_1})dxdydz=- \int_{t_1}^{t_2} dt  \iint_{\partial D} \rho \overrightarrow{f_1} \overrightarrow{n}dS+  \int_{t_1}^{t_2} dt  \iint_{\partial D} \rho \overrightarrow{f_2} \overrightarrow{n}dS$$</p>
+
−
               
+
−
                <p>Assuming that \(\rho\) ，\(\overrightarrow{f_1}\) ，\(\overrightarrow{f_2}\)  are all continuously differentiable, according to Gauss Formula we can get that:</p>
+
−
               
+
−
                <p>$$\int_{t_1}^{t_2} dt [\iiint_D \frac{\partial \rho}{\partial t} + \nabla \cdot (\rho \overrightarrow{f_1})- \nabla \cdot (\rho \overrightarrow{f_2})]dxdydz=0 $$</p>
+
−
             
+
−
                <p>Because of the continuity of integrand in   and the randomicity of  and  , we can get that:</p>
+
−
               
+
−
                <p>$$\frac{\partial \rho}{\partial t} + \nabla \cdot (\rho \overrightarrow{f_1})- \nabla \cdot (\rho \overrightarrow{f_2})=0, \quad  \Omega \times (0, \infty) $$</p>
+
−
               
+
−
                <p>And the definition conditions:</p>
+
−
               
+
−
                <p>$$ \rho |_{t=0}=\rho_0$$</p>
+
−
                <p>$$ \rho |_{t=t}=\rho_t $$</p>
+
−
               
+
−
                <p id="model-visual"> \(\rho_0\) , \(\rho_t\) can be measured directly in the experiment. For the  \(\overrightarrow{f_1}\), \(\overrightarrow{f_2}\) , we can estimate the value range based on our experiments and determine the the most appropriate value according to the simulated annealing algorithm. Then the \(\rho(x,y,z,t)\)  can be calculate according to the equation and definition conditions. Finally, the variation tendency can be described through the integration \iiint_D \rho(x,y,z,t)dxdydz</p>
+
−
               
+
−
                  <h2>Visual Simulation</h2>
+
−
                <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/f/f4/VSprocess3.png" width="60%">
+
−
                    <figcaption>Fig.7 Microtubule dynamic instability</figcaption>
+
−
                </figure>
+
−
                <p>We applied to programing visualization in this complex process based on certain laws of Microtubule dynamic instability.</p>
+
−
                  <figure class="text-center">
+
−
                        <img src="https://static.igem.org/mediawiki/2016/4/40/BNUVS_2.gif" width="60%">
+
−
                      <p><center>r=0.7   k=0.3  h=0.1
+
−
</center></p>
+
−
                   
+
−
                    <figcaption>Fig.8 Visual Simulation of Single protofilament</figcaption>   
+
−
                </figure>
+
−
               
+
−
             
+
−
                <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/b/b1/BNUVS_1.gif" width="60%">
+
−
                    <figcaption>Fig.9 Numerical results of microtubule growth simulation</figcaption>
+
−
                </figure>
+
−
               
+
−
                  <figure class="text-center">
+
−
                    <img src="https://static.igem.org/mediawiki/2016/8/8e/BNUVS_3.gif" width="60%">
+
−
                      <p><center> r=0.8   k=0.4  h=0.1
+
−
</center></p>
+
−
                   
+
−
                    <figcaption>Fig.10 Visual Simulation of microtubule with 13 protofilaments</figcaption>
+
−
                </figure>
+
−
<div class="reference">
+
−
                <ol>
+
−
                    <li id="ref-1">Caplow M, Shanks J. Microtubule dynamic instability does not result from stabilization of microtubules by tubulin-GDP-Pi subunits.[J]. Biochemistry, 1998, 37(37):12994-3002..</li>
+
−
                    <li id="ref-2">† B A, † M Z, Kauer M, et al. Microtubule dynamic instability: A new model with coupled GTP hydrolysis and multistep catastrophe[J]. Bioessays News & Reviews in Molecular Cellular & Developmental Biology, 2013, 35(5):452-61.</li>
+
−
                 
+
−
                </ol>
+
−
            </div>
+
−
             
+
−
            </article>
+
−
        </div>
+
−
<div id="footer">
+
−
    <div id="footer-div">
+
−
        <ul id="footer-ul">
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China">Home</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Project">Project</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Model">Model</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Achievements">Achievements</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Integrated_Practices">Practices</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Safety">Safety</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Team">Team</a></li>
+
−
        </ul>
+
−
        <span>© 2016 BNU</span>
+
−
    </div>
+
−
</div>
+
−
    </div>
+
−
</div>
+
  
−
</html>
+
/**
 +
--  2.0 page-heading
 +
*/
 +
 
 +
.page-heading {
 +
  width: 100%;
 +
  background-repeat: no-repeat;
 +
  background-attachment: fixed;
 +
  background-size: 100%;
 +
  text-align: center !important;
 +
  text-transform: uppercase;
 +
  height: 100vh;
 +
}
 +
 
 +
.page-heading h3 {
 +
  margin-top: 62px;
 +
  color: #ffffff;
 +
  font-size: 10vw;
 +
  font-weight: bolder;
 +
  font-family: "Avenir", sans-serif;
 +
  margin: 0;
 +
  padding-top: 35vh;
 +
  padding-bottom: 30vh;
 +
  text-shadow: 0 1px 6px rgba(120, 120, 120, .75);
 +
}
 +
 
 +
@media screen and (min-width: 992px) {
 +
  .page-heading h3 {
 +
    padding-top: 20%;
 +
  }
 +
}
 +
 
 +
@media screen and (min-width: 768px) and (max-width: 992px) {
 +
  .page-heading h3 {
 +
    padding-top: 40%;
 +
  }
 +
}
 +
 
 +
@media screen and (max-width: 768px) {
 +
  .page-heading h3 {
 +
    padding-top: 30%;
 +
  }
 +
}
 +
 
 +
/**
 +
--  3.0 navigation
 +
*/
 +
 
 +
@font-face {
 +
  font-family: 'Myriad Set Pro';
 +
  src: url('https://static.igem.org/mediawiki/2016/e/ed/T--BNU-China--MyriadSetPro.ttf') format('truetype');
 +
  font-weight: normal;
 +
  font-style: normal;
 +
}
 +
 
 +
@media screen and (min-width: 1024px) {
 +
  .nav-container, .nav-adjust {
 +
    background: #333;
 +
    border: 0;
 +
    padding-left: 50px;
 +
    padding-right: 50px;
 +
    transition: all 0.3s ease-in-out;
 +
    height: 44px;
 +
  }
 +
}
 +
 
 +
@media screen and (max-width: 1023px) {
 +
  .nav-container, .nav-adjust {
 +
    background: linear-gradient(to bottom, black, #3b3b3b);
 +
    /*background: black;*/
 +
    opacity: 0.9;
 +
    border: 0;
 +
    transition: all 0.3s ease-in-out;
 +
    /*height: 64px;*/
 +
  }
 +
}
 +
 
 +
#taxolightlogo {
 +
  height: 44px;
 +
  width: 44px;
 +
  float: left;
 +
  /*margin-left: 10px;*/
 +
}
 +
 
 +
#navbar-brand {
 +
  padding-top: 13px;
 +
  /*opacity: 0.8;*/
 +
  color: white;
 +
  font-weight: 300;
 +
  position: absolute;
 +
}
 +
 
 +
#navbar-toggle {
 +
  margin: 15px;
 +
}
 +
 
 +
/*.nav-adjust .scrolled-down {*/
 +
/*background: black;*/
 +
/*border: 0;*/
 +
/*opacity: 0.9;*/
 +
/*transition: all 0.3s ease-in-out;*/
 +
/*}*/
 +
 
 +
/*.nav-adjust .scrolled-top {*/
 +
/*background: black;*/
 +
/*border: 0;*/
 +
/*opacity: 0.8;*/
 +
/*transition: all 0.3s ease-in-out;*/
 +
/*}*/
 +
 
 +
#bs-example-navbar-collapse-1 {
 +
  /*margin: 7px 0;*/
 +
}
 +
 
 +
.nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 +
.navbar-inverse .navbar-nav > li > a:focus {
 +
  font-size: 16px;
 +
  font-weight: 400;
 +
  color: #fff;
 +
  /*opacity: 0.9;*/
 +
  opacity: 1;
 +
  /*transition: all 0.2s ease-in-out;*/
 +
  transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 +
  font-family: 'Myriad Set Pro', serif;
 +
}
 +
 
 +
@media screen and (min-width: 1024px) {
 +
  .nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 +
  .navbar-inverse .navbar-nav > li > a:focus {
 +
    margin: auto 0 auto 15px;
 +
  }
 +
}
 +
 
 +
@media screen and (max-width: 1023px) {
 +
  .nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 +
  .navbar-inverse .navbar-nav > li > a:focus {
 +
    margin: auto 0 auto -20px;
 +
    /*background: red;*/
 +
  }
 +
}
 +
 
 +
.nav-adjust > .nav-container div > ul > li.focus > a {
 +
  color: white;
 +
  opacity: 1;
 +
  /*transition: all 0.5s ease-in-out;*/
 +
  font-weight: 400;
 +
}
 +
 
 +
/*.nav-adjust .scrolled-down div > ul > li.focus > a {*/
 +
/*color: white;*/
 +
/*font-weight: 300;*/
 +
/*opacity: 1;*/
 +
/*transition: all 0.2s ease-in-out;*/
 +
/*}*/
 +
 
 +
li.dropdown.open ul {
 +
  background: rgba(0, 0, 0, 0.85);
 +
  color: white;
 +
  transition: all 0.2s ease-in-out;
 +
  /*height: 30px;*/
 +
}
 +
 
 +
li.dropdown.open ul li a {
 +
  color: #b0b0b0;
 +
  transition: all 0.2s ease-in-out;
 +
  font-weight: 300;
 +
  height: 30px;
 +
  font-family: 'Myriad Set Pro', serif;
 +
}
 +
 
 +
li.dropdown.open ul:hover {
 +
  background: #151515;
 +
  transition: all 0.2s ease-in-out;
 +
}
 +
 
 +
li.dropdown.open ul:hover li a {
 +
  filter: blur(1px);
 +
  transition: all 0.5s ease-in-out;
 +
  font-weight: 300;
 +
}
 +
 
 +
li.dropdown.open ul:hover li a {
 +
  filter: blur(1px);
 +
  transition: all 0.5s ease-in-out;
 +
  font-weight: 300;
 +
}
 +
 
 +
li.dropdown.open ul li a:hover {
 +
  background: black;
 +
  color: #e9e9e9;
 +
  text-shadow: none;
 +
  filter: none;
 +
  transition: all 0.2s ease-in-out;
 +
  height: 40px;
 +
}
 +
 
 +
/**
 +
--  4.0 page-story
 +
*/
 +
 
 +
#named-anchor {
 +
  padding-top: 100px;
 +
}
 +
 
 +
#named-anchor {
 +
  color: inherit;
 +
  text-decoration: none;
 +
}
 +
 
 +
.page-story {
 +
  padding-bottom: 30px;
 +
}
 +
 
 +
.page-story > article {
 +
  background-color: white;
 +
  /*box-shadow: 0 4px 6px rgba(75, 75, 75, 0.5);*/
 +
  padding: 32px 0;
 +
}
 +
 
 +
article {
 +
  margin: 40px;
 +
}
 +
 
 +
@media screen and (min-width: 768px) and (max-width: 992px) {
 +
  .page-story > article {
 +
    padding: 32px 64px;
 +
  }
 +
 
 +
  .container-fluid {
 +
    margin-bottom: -620px;
 +
  }
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 768px) and (min-width: 641px) {
 +
  .page-story > article {
 +
    padding: 16px 10px;
 +
  }
 +
 
 +
  .container-fluid {
 +
    margin-bottom: -430px;
 +
  }
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
  .page-story > article {
 +
    padding: 16px 5px;
 +
    margin: -15px;
 +
  }
 +
 
 +
  .container-fluid {
 +
    margin-bottom: -300px;
 +
  }
 +
 
 +
}
 +
 
 +
article > header.page-header {
 +
  text-align: center !important;
 +
  border: none;
 +
}
 +
 
 +
.page-header {
 +
  margin: 40px 0;
 +
}
 +
 
 +
article[id="achievement"] a {
 +
  color: #278A75;
 +
}
 +
 
 +
article[id="achievement"] h2,
 +
article[id="achievement"] h3,
 +
article[id="achievement"] h4,
 +
article[id="achievement"] h5 {
 +
  color: #D3853D
 +
}
 +
 
 +
article[id="project"] a,
 +
article[id="project"] h2,
 +
article[id="project"] h3,
 +
article[id="project"] h4,
 +
article[id="project"] h5 {
 +
  color: #8c7e01;
 +
}
 +
 
 +
article[id='modeling'] a,
 +
article[id='modeling'] h2,
 +
article[id='modeling'] h3,
 +
article[id='modeling'] h4,
 +
article[id='modeling'] h5 {
 +
  color: #278f45;
 +
}
 +
 
 +
article[id='practices'] a,
 +
article[id='practices'] h2,
 +
article[id='practices'] h3,
 +
article[id='practices'] h4,
 +
article[id='practices'] h5 {
 +
  color: #308276;
 +
}
 +
 
 +
article[id='safety'] a,
 +
article[id='safety'] h2,
 +
article[id='safety'] h3,
 +
article[id='safety'] h4,
 +
article[id='safety'] h5 {
 +
  color: #308276;
 +
}
 +
 
 +
article[id="modeling"] a,
 +
article[id="modeling"] h2,
 +
article[id="modeling"] h3,
 +
article[id="modeling"] h4,
 +
article[id="modeling"] h5 {
 +
  color: #278f45;
 +
}
 +
 
 +
article h2,
 +
article h3,
 +
article h4,
 +
article h5 {
 +
  font-weight: 500;
 +
}
 +
 
 +
article > header.page-header h1 {
 +
  font-weight: bolder;
 +
  font-size: 6vw;
 +
  text-transform: uppercase;
 +
}
 +
 
 +
#secondary-page-header {
 +
  display: block;
 +
  margin: 12px 0;
 +
  font-size: 24px;
 +
  color: #777777;
 +
}
 +
 
 +
article a {
 +
  text-decoration: none;
 +
}
 +
 
 +
article a:visited:hover {
 +
  color: #D3853D;
 +
}
 +
 
 +
article a:visited {
 +
  color: #278A75;
 +
}
 +
 
 +
article a:hover {
 +
  color: #D3853D;
 +
  text-decoration: none;
 +
}
 +
 
 +
article h2 {
 +
  font-size: 40px;
 +
  margin-bottom: 2px !important;
 +
  /* border-bottom: 1px solid #eee;*/
 +
}
 +
 
 +
article h3 {
 +
  font-size: 24px;
 +
}
 +
 
 +
article p,
 +
article blockquote {
 +
  font-size: 16px;
 +
  line-height: 22px;
 +
  margin-bottom: 16px;
 +
  font-weight: 500;
 +
}
 +
 
 +
article ol {
 +
  font-weight: normal;
 +
  margin: 0 0 16px 1.5em;
 +
  list-style: decimal outside;
 +
}
 +
 
 +
article ol li {
 +
  font-weight: normal;
 +
}
 +
 
 +
figcaption {
 +
  font-size: 18px;
 +
}
 +
 
 +
article figure {
 +
  padding: 16px 0;
 +
}
 +
 
 +
article figure {
 +
  max-width: 100%;;
 +
}
 +
 
 +
article figure figcaption {
 +
  text-align: center;
 +
  color: #278A75;
 +
  padding: 8px;
 +
}
 +
 
 +
article video {
 +
  max-width: 100% !important;
 +
  height: auto !important;
 +
  background-color: #000;
 +
  background-size: 100% 100%;
 +
  display: block;
 +
  margin: 25px auto;
 +
}
 +
 
 +
.reference {
 +
  padding: 12px 0 0 0;
 +
  border-top: 1px solid #eee;
 +
}
 +
 
 +
div.reference:before {
 +
  color: #278A75;
 +
  font-size: 18px;
 +
  content: "Reference:";
 +
  line-height: 16px;
 +
 
 +
}
 +
 
 +
#globalWrapper .reference > ol, .reference > ol {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style-type: none;
 +
  counter-reset: counter;
 +
}
 +
 
 +
div.reference > ol li {
 +
  font-style: 12px;
 +
  line-height: 16px;
 +
  color: rgb(102, 102, 102);
 +
  margin: 6px 0;
 +
}
 +
 
 +
div.reference > ol li:before {
 +
  content: '[' counter(counter) ']';
 +
  counter-increment: counter;
 +
  display: inline-block;
 +
  margin-right: 4px;
 +
}
 +
 
 +
/**
 +
--  5.0 team-page
 +
*/
 +
 
 +
.self-introduction .info-sec {
 +
  font-size: 22px !important;
 +
}
 +
 
 +
#team {
 +
  /*margin: 30px auto;*/
 +
  padding-top: 30px;
 +
  padding-bottom: 30px;
 +
  background: #ffffff;
 +
}
 +
 
 +
.team-header h3 {
 +
  margin: 20px auto 20px auto;
 +
  text-align: center !important;
 +
  font-weight: 100;
 +
  font-size: 6vw;
 +
}
 +
 
 +
.team-header p {
 +
  margin-top: 10px;
 +
  margin-bottom: 30px;
 +
  text-align: center !important;
 +
  color: #adbabb;
 +
}
 +
 
 +
#team-secondary {
 +
  font-size: 28px !important;
 +
}
 +
 
 +
#myTab {
 +
  margin-bottom: 30px;
 +
}
 +
 
 +
#team .team-figure {
 +
  cursor: pointer;
 +
  margin: 0;
 +
  padding: 0 !important;
 +
  z-index: 90 !important;
 +
}
 +
 
 +
.team-figure .pic {
 +
  background-size: cover;
 +
  min-height: 438px;
 +
  transition: all 1.5s;
 +
 
 +
  -webkit-animation-fill-mode: both;
 +
  -moz-animation-fill-mode: both;
 +
  -ms-animation-fill-mode: both;
 +
  -o-animation-fill-mode: both;
 +
  animation-fill-mode: both;
 +
  -webkit-animation-duration: 0s;
 +
  -moz-animation-duration: 0s;
 +
  -ms-animation-duration: 0s;
 +
  -o-animation-duration: 0s;
 +
  animation-duration: 0s;
 +
  -webkit-animation-duration: 0.7s;
 +
  -moz-animation-duration: 0.7s;
 +
  -ms-animation-duration: 0.7s;
 +
  -o-animation-duration: 0.7s;
 +
  animation-duration: 0.7s;
 +
  display: block;
 +
  /*margin:5px 0 7px 5px;*/
 +
  /*padding:3px;*/
 +
}
 +
 
 +
.team-intro {
 +
  min-height: 438px;
 +
}
 +
 
 +
.self-introduction {
 +
  margin-top: 15px;
 +
  margin-bottom: 30px;
 +
}
 +
 
 +
.right {
 +
  padding-right: 30px;
 +
  text-align: left !important;
 +
}
 +
 
 +
.right > p {
 +
  text-align: left !important;
 +
 
 +
}
 +
 
 +
.left {
 +
  padding-left: 30px;
 +
  text-align: right !important;
 +
}
 +
 
 +
.left > p {
 +
  text-align: right !important;
 +
}
 +
 
 +
.self-introduction h3 {
 +
  margin: 10px auto;
 +
  font-weight: 100;
 +
  font-size: 32px;
 +
}
 +
 
 +
.self-introduction h3 > p {
 +
  font-size: 26px;
 +
}
 +
 
 +
.self-introduction p {
 +
  margin: 10px auto;
 +
  color: #adbabb;
 +
  font-size: 16px !important;
 +
}
 +
 
 +
@keyframes swing {
 +
  20% {
 +
    transform: rotate(15deg);
 +
  }
 +
  40% {
 +
    transform: rotate(-10deg);
 +
  }
 +
  60% {
 +
    transform: rotate(5deg);
 +
  }
 +
  80% {
 +
    transform: rotate(-5deg);
 +
  }
 +
  100% {
 +
    transform: rotate(0deg);
 +
  }
 +
}
 +
 
 +
.team-figure .pic:hover,
 +
.team-figure:hover > .pic {
 +
  -webkit-transform-origin: top center;
 +
  -moz-transform-origin: top center;
 +
  -o-transform-origin: top center;
 +
  transform-origin: top center;
 +
  -webkit-animation-name: swing;
 +
  -moz-animation-name: swing;
 +
  -o-animation-name: swing;
 +
  animation-name: swing;
 +
}
 +
 
 +
/**
 +
--  6.0 Achievements-page
 +
*/
 +
 
 +
.panel-info {
 +
  border-radius: 0;
 +
  border-color: #dedede;
 +
}
 +
 
 +
.panel-info .panel-heading {
 +
  border-color: #dedede;
 +
  background-color: #dedede;
 +
  border-radius: 0;
 +
}
 +
 
 +
.panel-info.bronze {
 +
  border-color: #DA8D41;
 +
}
 +
 
 +
.panel-info.bronze > .panel-heading {
 +
  background-color: #DA8D41;
 +
  border-color: #DA8D41;
 +
}
 +
 
 +
.panel-info.sliver {
 +
  border-color: #dedede;
 +
}
 +
 
 +
.panel-info.sliver > .panel-heading {
 +
  background-color: #dedede;
 +
  border-color: #dedede;
 +
}
 +
 
 +
.panel-info.gold {
 +
  border-color: #ffdb76;
 +
}
 +
 
 +
.panel-info.gold > .panel-heading {
 +
  background-color: #ffdb76;
 +
  border-color: #ffdb76;
 +
}
 +
 
 +
span.medal {
 +
  font-weight: 700;
 +
  color: #ffffff;
 +
  font-size: 1.5em;
 +
}
 +
 
 +
/**
 +
--  7.0 attributions
 +
*/
 +
 
 +
.panel-group .panel {
 +
  border-radius: 0;
 +
  margin: 0 0 16px 0;
 +
  line-height: 24px;
 +
}
 +
 
 +
.panel-info.attributions {
 +
  border-color: #f0d5ae;
 +
}
 +
 
 +
.panel-info.attributions > .panel-heading {
 +
  background-color: #f0d5ae;
 +
  border-color: #f0d5ae;
 +
}
 +
 
 +
/**
 +
--  8.0 practice
 +
*/
 +
div#practice {
 +
  background-size: 100%;
 +
  background-repeat: no-repeat;
 +
  width: 100%;
 +
  height: 100vh;
 +
  background-image: url(https://static.igem.org/mediawiki/2016/3/39/T--BNU-China--sky.jpg);
 +
}
 +
 
 +
#practice img {
 +
  height: 62%;
 +
  width: 100%;
 +
}
 +
 
 +
#practice-heading {
 +
  padding-bottom: 50vh;
 +
}
 +
 
 +
div.practice-link-left {
 +
  position: absolute;
 +
  font-size: 2vw;
 +
  left: 26%;
 +
  top: 60%;
 +
}
 +
 
 +
div.practice-link-right {
 +
  position: absolute;
 +
  font-size: 2vw;
 +
  left: 51%;
 +
  top: 60%;
 +
}
 +
 
 +
div.practice-link-left > a,
 +
div.practice-link-right > a {
 +
  text-decoration: none;
 +
  color: white;
 +
}
 +
 
 +
#practice div.practice-main {
 +
  display: inline-block;
 +
  position: relative;
 +
}
 +
 
 +
.wrapper img {
 +
  width: 100%;
 +
}
 +
 
 +
/**
 +
--  9.0 footer
 +
*/
 +
 
 +
#footer,
 +
#footer a {
 +
  color: #999;
 +
  text-decoration: none;
 +
}
 +
 
 +
#footer {
 +
  clear: both;
 +
  text-align: right;
 +
}
 +
 
 +
#footer-div {
 +
  padding: 20px 15px;
 +
  border-top: 1px solid #ccc;
 +
  width: 80%;
 +
  margin: 0 auto;
 +
  clear: both;
 +
}
 +
 
 +
#footer-div:before,
 +
#footer-div:after {
 +
  display: table;
 +
  content: "";
 +
}
 +
 
 +
#footer-ul,
 +
#footer li {
 +
  display: inline;
 +
}
 +
 
 +
#footer li {
 +
  list-style: none;
 +
}
 +
 
 +
#footer-div span {
 +
  float: left;
 +
}
 +
 
 +
#footer-div li + li::before {
 +
  color: rgb(187, 187, 187);
 +
  padding: 0 3px;
 +
}

Revision as of 19:02, 18 October 2016

/**---------------------------------------------- 

>>> Table of Contents:
------------------------------------------------
0.0 global
1.0 main-container
2.0 page-heading
3.0 navigation
4.0 page-story
5.0 team-page
6.0 achievements-page
7.0 attributions
8.0 practices
9.0 footer
------------------------------------------------
  • /

/** -- 0.0 global

  • /

.header-color { 

 background: #ffffff;
 color: #646464;

}

/** -- 1.0 main-container

  • /

.main-container { 

 top: 0;
 left: 0;
 right: 0;
 margin: 0;
 padding: 0;
 background-color: white;
 overflow: auto;
 position: absolute;

}

/** -- 2.0 page-heading

  • /

.page-heading { 

 width: 100%;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: 100%;
 text-align: center !important;
 text-transform: uppercase;
 height: 100vh;

}

.page-heading h3 { 

 margin-top: 62px;
 color: #ffffff;
 font-size: 10vw;
 font-weight: bolder;
 font-family: "Avenir", sans-serif;
 margin: 0;
 padding-top: 35vh;
 padding-bottom: 30vh;
 text-shadow: 0 1px 6px rgba(120, 120, 120, .75);

}

@media screen and (min-width: 992px) { 

 .page-heading h3 {
   padding-top: 20%;
 }

}

@media screen and (min-width: 768px) and (max-width: 992px) { 

 .page-heading h3 {
   padding-top: 40%;
 }

}

@media screen and (max-width: 768px) { 

 .page-heading h3 {
   padding-top: 30%;
 }

}

/** -- 3.0 navigation

  • /

@font-face { 

 font-family: 'Myriad Set Pro';
 src: url('https://static.igem.org/mediawiki/2016/e/ed/T--BNU-China--MyriadSetPro.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;

}

@media screen and (min-width: 1024px) { 

 .nav-container, .nav-adjust {
   background: #333;
   border: 0;
   padding-left: 50px;
   padding-right: 50px;
   transition: all 0.3s ease-in-out;
   height: 44px;
 }

}

@media screen and (max-width: 1023px) { 

 .nav-container, .nav-adjust {
   background: linear-gradient(to bottom, black, #3b3b3b);
   /*background: black;*/
   opacity: 0.9;
   border: 0;
   transition: all 0.3s ease-in-out;
   /*height: 64px;*/
 }

}

  1. taxolightlogo {
 height: 44px;
 width: 44px;
 float: left;
 /*margin-left: 10px;*/

}

  1. navbar-brand {
 padding-top: 13px;
 /*opacity: 0.8;*/
 color: white;
 font-weight: 300;
 position: absolute;

}

  1. navbar-toggle {
 margin: 15px;

}

/*.nav-adjust .scrolled-down {*/ /*background: black;*/ /*border: 0;*/ /*opacity: 0.9;*/ /*transition: all 0.3s ease-in-out;*/ /*}*/

/*.nav-adjust .scrolled-top {*/ /*background: black;*/ /*border: 0;*/ /*opacity: 0.8;*/ /*transition: all 0.3s ease-in-out;*/ /*}*/

  1. bs-example-navbar-collapse-1 {
 /*margin: 7px 0;*/

}

.nav-adjust > .nav-container div > ul > li > a, .navbar-brand a, .navbar-inverse .navbar-nav > li > a:focus { 

 font-size: 16px;
 font-weight: 400;
 color: #fff;
 /*opacity: 0.9;*/
 opacity: 1;
 /*transition: all 0.2s ease-in-out;*/
 transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 font-family: 'Myriad Set Pro', serif;

}

@media screen and (min-width: 1024px) { 

 .nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 .navbar-inverse .navbar-nav > li > a:focus {
   margin: auto 0 auto 15px;
 }

}

@media screen and (max-width: 1023px) { 

 .nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 .navbar-inverse .navbar-nav > li > a:focus {
   margin: auto 0 auto -20px;
   /*background: red;*/
 }

}

.nav-adjust > .nav-container div > ul > li.focus > a { 

 color: white;
 opacity: 1;
 /*transition: all 0.5s ease-in-out;*/
 font-weight: 400;

}

/*.nav-adjust .scrolled-down div > ul > li.focus > a {*/ /*color: white;*/ /*font-weight: 300;*/ /*opacity: 1;*/ /*transition: all 0.2s ease-in-out;*/ /*}*/

li.dropdown.open ul { 

 background: rgba(0, 0, 0, 0.85);
 color: white;
 transition: all 0.2s ease-in-out;
 /*height: 30px;*/

}

li.dropdown.open ul li a { 

 color: #b0b0b0;
 transition: all 0.2s ease-in-out;
 font-weight: 300;
 height: 30px;
 font-family: 'Myriad Set Pro', serif;

}

li.dropdown.open ul:hover { 

 background: #151515;
 transition: all 0.2s ease-in-out;

}

li.dropdown.open ul:hover li a { 

 filter: blur(1px);
 transition: all 0.5s ease-in-out;
 font-weight: 300;

}

li.dropdown.open ul:hover li a { 

 filter: blur(1px);
 transition: all 0.5s ease-in-out;
 font-weight: 300;

}

li.dropdown.open ul li a:hover { 

 background: black;
 color: #e9e9e9;
 text-shadow: none;
 filter: none;
 transition: all 0.2s ease-in-out;
 height: 40px;

}

/** -- 4.0 page-story

  • /
  1. named-anchor {
 padding-top: 100px;

}

  1. named-anchor {
 color: inherit;
 text-decoration: none;

}

.page-story { 

 padding-bottom: 30px;

}

.page-story > article { 

 background-color: white;
 /*box-shadow: 0 4px 6px rgba(75, 75, 75, 0.5);*/
 padding: 32px 0;

}

article { 

 margin: 40px;

}

@media screen and (min-width: 768px) and (max-width: 992px) { 

 .page-story > article {
   padding: 32px 64px;
 }

 .container-fluid {
   margin-bottom: -620px;
 }

}

@media screen and (max-width: 768px) and (min-width: 641px) { 

 .page-story > article {
   padding: 16px 10px;
 }

 .container-fluid {
   margin-bottom: -430px;
 }

}

@media screen and (max-width: 640px) { 

 .page-story > article {
   padding: 16px 5px;
   margin: -15px;
 }

 .container-fluid {
   margin-bottom: -300px;
 }

}

article > header.page-header { 

 text-align: center !important;
 border: none;

}

.page-header { 

 margin: 40px 0;

}

article[id="achievement"] a { 

 color: #278A75;

}

article[id="achievement"] h2, article[id="achievement"] h3, article[id="achievement"] h4, article[id="achievement"] h5 { 

 color: #D3853D

}

article[id="project"] a, article[id="project"] h2, article[id="project"] h3, article[id="project"] h4, article[id="project"] h5 { 

 color: #8c7e01;

}

article[id='modeling'] a, article[id='modeling'] h2, article[id='modeling'] h3, article[id='modeling'] h4, article[id='modeling'] h5 { 

 color: #278f45;

}

article[id='practices'] a, article[id='practices'] h2, article[id='practices'] h3, article[id='practices'] h4, article[id='practices'] h5 { 

 color: #308276;

}

article[id='safety'] a, article[id='safety'] h2, article[id='safety'] h3, article[id='safety'] h4, article[id='safety'] h5 { 

 color: #308276;

}

article[id="modeling"] a, article[id="modeling"] h2, article[id="modeling"] h3, article[id="modeling"] h4, article[id="modeling"] h5 { 

 color: #278f45;

}

article h2, article h3, article h4, article h5 { 

 font-weight: 500;

}

article > header.page-header h1 { 

 font-weight: bolder;
 font-size: 6vw;
 text-transform: uppercase;

}

  1. secondary-page-header {
 display: block;
 margin: 12px 0;
 font-size: 24px;
 color: #777777;

}

article a { 

 text-decoration: none;

}

article a:visited:hover { 

 color: #D3853D;

}

article a:visited { 

 color: #278A75;

}

article a:hover { 

 color: #D3853D;
 text-decoration: none;

}

article h2 { 

 font-size: 40px;
 margin-bottom: 2px !important;
 /* border-bottom: 1px solid #eee;*/

}

article h3 { 

 font-size: 24px;

}

article p, article blockquote { 

 font-size: 16px;
 line-height: 22px;
 margin-bottom: 16px;
 font-weight: 500;

}

article ol { 

 font-weight: normal;
 margin: 0 0 16px 1.5em;
 list-style: decimal outside;

}

article ol li { 

 font-weight: normal;

}

figcaption { 

 font-size: 18px;

}

article figure { 

 padding: 16px 0;

}

article figure { 

 max-width: 100%;;

}

article figure figcaption { 

 text-align: center;
 color: #278A75;
 padding: 8px;

}

article video { 

 max-width: 100% !important;
 height: auto !important;
 background-color: #000;
 background-size: 100% 100%;
 display: block;
 margin: 25px auto;

}

.reference { 

 padding: 12px 0 0 0;
 border-top: 1px solid #eee;

}

div.reference:before { 

 color: #278A75;
 font-size: 18px;
 content: "Reference:";
 line-height: 16px;

}

  1. globalWrapper .reference > ol, .reference > ol {
 margin: 0;
 padding: 0;
 list-style-type: none;
 counter-reset: counter;

}

div.reference > ol li { 

 font-style: 12px;
 line-height: 16px;
 color: rgb(102, 102, 102);
 margin: 6px 0;

}

div.reference > ol li:before { 

 content: '[' counter(counter) ']';
 counter-increment: counter;
 display: inline-block;
 margin-right: 4px;

}

/** -- 5.0 team-page

  • /

.self-introduction .info-sec { 

 font-size: 22px !important;

}

  1. team {
 /*margin: 30px auto;*/
 padding-top: 30px;
 padding-bottom: 30px;
 background: #ffffff;

}

.team-header h3 { 

 margin: 20px auto 20px auto;
 text-align: center !important;
 font-weight: 100;
 font-size: 6vw;

}

.team-header p { 

 margin-top: 10px;
 margin-bottom: 30px;
 text-align: center !important;
 color: #adbabb;

}

  1. team-secondary {
 font-size: 28px !important;

}

  1. myTab {
 margin-bottom: 30px;

}

  1. team .team-figure {
 cursor: pointer;
 margin: 0;
 padding: 0 !important;
 z-index: 90 !important;

}

.team-figure .pic { 

 background-size: cover;
 min-height: 438px;
 transition: all 1.5s;

 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -ms-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-duration: 0s;
 -moz-animation-duration: 0s;
 -ms-animation-duration: 0s;
 -o-animation-duration: 0s;
 animation-duration: 0s;
 -webkit-animation-duration: 0.7s;
 -moz-animation-duration: 0.7s;
 -ms-animation-duration: 0.7s;
 -o-animation-duration: 0.7s;
 animation-duration: 0.7s;
 display: block;
 /*margin:5px 0 7px 5px;*/
 /*padding:3px;*/

}

.team-intro { 

 min-height: 438px;

}

.self-introduction { 

 margin-top: 15px;
 margin-bottom: 30px;

}

.right { 

 padding-right: 30px;
 text-align: left !important;

}

.right > p { 

 text-align: left !important;

}

.left { 

 padding-left: 30px;
 text-align: right !important;

}

.left > p { 

 text-align: right !important;

}

.self-introduction h3 { 

 margin: 10px auto;
 font-weight: 100;
 font-size: 32px;

}

.self-introduction h3 > p { 

 font-size: 26px;

}

.self-introduction p { 

 margin: 10px auto;
 color: #adbabb;
 font-size: 16px !important;

}

@keyframes swing { 

 20% {
   transform: rotate(15deg);
 }
 40% {
   transform: rotate(-10deg);
 }
 60% {
   transform: rotate(5deg);
 }
 80% {
   transform: rotate(-5deg);
 }
 100% {
   transform: rotate(0deg);
 }

}

.team-figure .pic:hover, .team-figure:hover > .pic { 

 -webkit-transform-origin: top center;
 -moz-transform-origin: top center;
 -o-transform-origin: top center;
 transform-origin: top center;
 -webkit-animation-name: swing;
 -moz-animation-name: swing;
 -o-animation-name: swing;
 animation-name: swing;

}

/** -- 6.0 Achievements-page

  • /

.panel-info { 

 border-radius: 0;
 border-color: #dedede;

}

.panel-info .panel-heading { 

 border-color: #dedede;
 background-color: #dedede;
 border-radius: 0;

}

.panel-info.bronze { 

 border-color: #DA8D41;

}

.panel-info.bronze > .panel-heading { 

 background-color: #DA8D41;
 border-color: #DA8D41;

}

.panel-info.sliver { 

 border-color: #dedede;

}

.panel-info.sliver > .panel-heading { 

 background-color: #dedede;
 border-color: #dedede;

}

.panel-info.gold { 

 border-color: #ffdb76;

}

.panel-info.gold > .panel-heading { 

 background-color: #ffdb76;
 border-color: #ffdb76;

}

span.medal { 

 font-weight: 700;
 color: #ffffff;
 font-size: 1.5em;

}

/** -- 7.0 attributions

  • /

.panel-group .panel { 

 border-radius: 0;
 margin: 0 0 16px 0;
 line-height: 24px;

}

.panel-info.attributions { 

 border-color: #f0d5ae;

}

.panel-info.attributions > .panel-heading { 

 background-color: #f0d5ae;
 border-color: #f0d5ae;

}

/** -- 8.0 practice

  • /

div#practice { 

 background-size: 100%;
 background-repeat: no-repeat;
 width: 100%;
 height: 100vh;
 background-image: url(T--BNU-China--sky.jpg);

}

  1. practice img {
 height: 62%;
 width: 100%;

}

  1. practice-heading {
 padding-bottom: 50vh;

}

div.practice-link-left { 

 position: absolute;
 font-size: 2vw;
 left: 26%;
 top: 60%;

}

div.practice-link-right { 

 position: absolute;
 font-size: 2vw;
 left: 51%;
 top: 60%;

}

div.practice-link-left > a, div.practice-link-right > a { 

 text-decoration: none;
 color: white;

}

  1. practice div.practice-main {
 display: inline-block;
 position: relative;

}

.wrapper img { 

 width: 100%;

}

/** -- 9.0 footer

  • /
  1. footer,
  2. footer a {
 color: #999;
 text-decoration: none;

}

  1. footer {
 clear: both;
 text-align: right;

}

  1. footer-div {
 padding: 20px 15px;
 border-top: 1px solid #ccc;
 width: 80%;
 margin: 0 auto;
 clear: both;

}

  1. footer-div:before,
  2. footer-div:after {
 display: table;
 content: "";

}

  1. footer-ul,
  2. footer li {
 display: inline;

}

  1. footer li {
 list-style: none;

}

  1. footer-div span {
 float: left;

}

  1. footer-div li + li::before {
 color: rgb(187, 187, 187);
 padding: 0 3px;

}